SirixDB front-end / first steps

Yes, I mean it’s trying to proxy :wink:

the error is:

ERROR [HPM] Error occurred while trying to proxy request /user/authorize?protocol=oauth2&response_type=code&access_type=offline&redirect_uri=http%3A%2F%2Flocalhost%3A3005%2Fcallback&state=Z7y9ab2KKQVj1H2YPaoDw from localhost:3005 to https://localhost:9443 (DEPTH_ZERO_SELF_SIGNED_CERT) (https://nodejs.org/api/errors.html#errors_common_system_errors)

1 Like

I’ve also posted in their Discourse channel.

I found the problem. The axios plugin is client-side, but the certificate problem is server-side. So I changed the proxy config to as follows:

proxy: {
    '/auth/': {
      target: 'http://192.168.99.101:8080',
      pathRewrite: {'^/api/': ''}
    },
    '/sirix': {
      // target: 'https://localhost:9443/',
      target: 'https://192.168.99.101:9443/',
      pathRewrite: {'^/api/sirix/': ''},
      agent: new Agent({ rejectUnauthorized: false })
    }
  }

Note the “agent” option.
However, I then hit a Refused to set unsafe header "Origin" error, which it seems comes from the axios plugin attempting to set the “Origin” header of an ajax request, which is apparently not allowed. So I removed the appropriate lines from the axios plugin (though frankly, not sure if it’s needed at all). However, now the keycloak server is causing problems, I’ll update once I figure out what is going on.

1 Like

Yes, I’ve already removed all this stupid stuff, also imported https :wink:

I’m getting ReferenceError: Agent is not defined, when I simply add it in the proxy section

Whoops… have to add import { Agent } from 'https'; at the top.

I’m getting the following error from the sirix server: Exception in thread "vert.x-eventloop-thread-0" io.vertx.core.impl.NoStackTraceThrowable: Bad Request: {"error":"invalid_grant","error_description":"Code not valid"}

Is this during the authorization? Or when the API call is made?

On attempting to get the databases from the rest api.

Hm, from what I understand this error should only happen, when authenticating against the /token endpoint. Strange… however, also the proxy doesn’t seem to work again, or… at least Chrome sends a Preflight request and I’m getting a CORS-exception again, that the authorization header is not allowed.

However, I’ve configured it in the server

Strange. I’m using chrome and I don’t get a CORS error.

Ah, I figured it out. The real error is Exception in thread "vert.x-eventloop-thread-0" io.vertx.core.impl.NoStackTraceThrowable: Expired Token. But I tried to solve that by clearing cookies and logging in again, which is when I got the other error. Still getting the expired error, though.

Hm, this might be an issue on the SirixDB HTTP-Server side you’re running into with the expired token. Or hmmm… I’m not sure if the SirixDB HTTP-Server or the Node.js server from Nuxt.js should issue a new token. I guess probably the Node.js server, as it received the token in the first place and needs to also store the new token.

Regarding my problem with CORS, my nuxt config so far. However, it proxies the calls to the SirixDB HTTP-Server correctly somehow, as the login via Keycloak works with Chrome (not so with Firefox somehow).

import { Agent } from 'https';

export default {
  mode: 'universal',
  /*
   ** Headers of the page
   */
  server: {
    port: 3005, // default: 3000
    host: "0.0.0.0" // default: localhost
  },
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      {
        charset: 'utf-8'
      },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1'
      },
      {
        hid: 'description',
        name: 'description',
        content: process.env.npm_package_description || ''
      }
    ],
    link: [
      {
        rel: 'icon',
        type: 'image/x-icon',
        href: '/favicon.ico'
      }
    ]
  },
  /*
   ** Customize the progress-bar color
   */
  loading: {
    color: '#fff'
  },
  /*
   ** Global CSS
   */
  css: ['element-ui/lib/theme-chalk/index.css'],
  /*
   ** Plugins to load before mounting the App
   */
  plugins: ['@/plugins/element-ui', '@/plugins/dependencyContainer.ts', '@/plugins/axios'],
  /*
   ** Nuxt.js dev-modules
   */
  buildModules: ['@nuxt/typescript-build'],
  /*
   ** Nuxt.js modules
   */
  modules: ['@nuxtjs/pwa', ['@nuxtjs/axios',  { baseURL: 'https://localhost:9443', rejectUnauthorized: false }], '@nuxtjs/auth', '@nuxtjs/proxy', '@nuxtjs/toast'],
  /*
   ** Build configuration
   */
  build: {
    transpile: [/^element-ui/],
    vendor: ['axios'],
    /*
     ** You can extend webpack config here
     */
    extend: function (config, {isDev, isClient}) {
      config.node = {
        fs: "empty"
      };
    }
  },
  axios: {
    baseURL: 'https://localhost:9443',
    browserBaseURL: 'https://localhost:9443',
    proxyHeaders: true,
    proxy: true,
    debug: true,
  },
  auth: {
    strategies: {
      keycloak: {
	_scheme: 'oauth2',
	authorization_endpoint: '/user/authorize',
	userinfo_endpoint: false,
	access_type: 'offline',
	access_token_endpoint: '/token',
	response_type: 'code',
	token_type: 'Bearer',
	token_key: 'access_token',
        grant_type: 'authorization_code'
      },
    },
    redirect: {
      login: '/login',
      callback: '/callback',
      home: '/'
    },
  },
  router: {
    middleware: ['auth']
  },
  proxy: {
    '/user/authorize': {
      target: 'https://192.168.178.44:9443',
      agent: new Agent({ rejectUnauthorized: false }),
      changeOrigin: true
    },
    '/token': {
      target: 'http://192.168.178.44:9443',
      agent: new Agent({ rejectUnauthorized: false }),
      changeOrigin: true
    },
    '/sirix': {
      target: 'https://192.168.178.44:9443/',
      pathRewrite: {'^/sirix/': ''},
      agent: new Agent({ rejectUnauthorized: false }),
      changeOrigin: true
    }
  }
}

First, change localhost:9443 in axios (both times) and in modules to localhost:3005. Otherwise you are calling directly to the sirix server. However, the current proxy config won’t work correctly. You need pathRewrite: {'^/api/': ''} and pathRewrite: {'^/api/sirix/': ''},, because the proxy will add /api/ to the path by default. Sorry if I’m not clear, I’m in a bit of a hurry at the moment.

1 Like

No, thanks for all your work and dedication :slight_smile:

import { Agent } from 'https';

export default {
  mode: 'universal',
  /*
   ** Headers of the page
   */
  server: {
    port: 3005, // default: 3000
    host: "0.0.0.0" // default: localhost
  },
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      {
        charset: 'utf-8'
      },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1'
      },
      {
        hid: 'description',
        name: 'description',
        content: process.env.npm_package_description || ''
      }
    ],
    link: [
      {
        rel: 'icon',
        type: 'image/x-icon',
        href: '/favicon.ico'
      }
    ]
  },
  /*
   ** Customize the progress-bar color
   */
  loading: {
    color: '#fff'
  },
  /*
   ** Global CSS
   */
  css: ['element-ui/lib/theme-chalk/index.css'],
  /*
   ** Plugins to load before mounting the App
   */
  plugins: ['@/plugins/element-ui', '@/plugins/dependencyContainer.ts', '@/plugins/axios'],
  /*
   ** Nuxt.js dev-modules
   */
  buildModules: ['@nuxt/typescript-build'],
  /*
   ** Nuxt.js modules
   */
  modules: ['@nuxtjs/pwa', ['@nuxtjs/axios',  { baseURL: 'localhost:3005', rejectUnauthorized: false }], '@nuxtjs/auth', '@nuxtjs/proxy', '@nuxtjs/toast'],
  /*
   ** Build configuration
   */
  build: {
    transpile: [/^element-ui/],
    vendor: ['axios'],
    /*
     ** You can extend webpack config here
     */
    extend: function (config, {isDev, isClient}) {
      config.node = {
        fs: "empty"
      };
    }
  },
  axios: {
    baseURL: 'localhost:3005',
    browserBaseURL: 'localhost:3005',
    proxyHeaders: true,
    proxy: true,
    debug: true,
  },
  auth: {
    strategies: {
      keycloak: {
	_scheme: 'oauth2',
	authorization_endpoint: 'https://localhost:9443/user/authorize',
	userinfo_endpoint: false,
	access_type: 'offline',
	access_token_endpoint: 'https://localhost:9443/token',
	response_type: 'code',
	token_type: 'Bearer',
	token_key: 'access_token'
      },
    },
    redirect: {
      login: '/login',
      callback: '/callback',
      home: '/'
    },
  },
  router: {
    middleware: ['auth']
  },
  proxy: {
    '/auth/': {
      target: 'http://localhost:8080',
      pathRewrite: {'^/api/': ''},
      changeOrigin: true
    },
    '/sirix': {
      target: 'https://localhost:9443',
      pathRewrite: {'^/api/sirix/': ''},
      agent: new Agent({ rejectUnauthorized: false }),
      changeOrigin: true
    }
  }
}

My config might be very similar to yours now, but now the request on the callback-page is not made against the /token endpoint anymore, also not in Chrome, very strange.

By the way you can try loading the auth.js plugin for refresh_token support (seems they still work on this in Nuxt.js). I’ve added the part on the SirixDB HTTP-Server side, I hope.

Try changing the auth and token options to /user/auth and /token.

Hm, maybe you can copy your complete configuration? Or maybe update your repositories and make a PR :slight_smile:. It also didn’t work with /user/auth and /token and the same in the proxy config.

Oh and regarding the refresh_token problem: https://github.com/nuxt-community/auth-module/pull/457

And some issues regarding Keycloak, that’s where I copied the auth.js file from :slight_smile:

Certainly. It’ll be about an hour and a half from now, however. Maybe PR as well.

Excellent. I’ll try that later.