Nuxt Auth using different prefixes for axios calls depending on server-side or client-side call

[moritzlaube]

In my project, I am using nuxt/auth, nuxt/proxy and nuxt/axios. My Nuxt App lives on localhost:8080 while my API is located at localhost:5000. My API generates a session and sends a http-only cookie to the frontend.

I got everything working fine. Registering, logging in ... Only on reload the app kept on logging me out. When I checked the network requests, I figured that – on reload – the Nuxt server-side was trying to make a GET request to my API's users route that I specified in the auth config. But it prefixed it with '/api'! So the final url looked like this: /api/api/v1/me.

So I deleted the '/api' from my auth.endpoints.users config. And it worked. BUT: When I am calling this.$auth.fetchUser() on the client, the API call looks as follows: /v1/me 🤯.

Am I missing something here? Or is this a bug with the Auth module? Appreciate your help.

The are my auth, proxy and axios configs in nuxt.config.js:

auth: {
    strategies: {
      local: {
        token: {
          required: false,
          type: false,
        },
        endpoints: {
          login: { url: '/api/v1/auth/login', method: 'post' },
          logout: { url: '/api/v1/auth/logout', method: 'post' },
          user: { url: '/v1/me', method: 'get' }, // I am omitting the /api prefix here. And it's weird that I have to do this.
        },
        user: {
          property: 'user',
          autoFetch: false,
        },
      },
    },
  },
  proxy: {
    '/api/': {
      target: process.env.API_URL,
      pathRewrite: { '^/api/': '' },
    },
  },
  axios: {
    proxy: true,
    credentials: true,
  }, 

[moritzlaube]

I finally found the solution myself. It has to do with how nuxt/axios works differently server-sider and client side when using the proxy module. The solution was to pass the following env-variables to the Nuxt build: API_HOST, API_PORT and API_PREFIX. As far as I understand, Axios then uses the baseURL (http://[API_HOST]:[API_PORT][API_PREFIX]) for client side calls and the API_PREFIX variable for server-side calls. However, this setup works for me:

auth: {
    strategies: {
      local: {
        token: {
          required: false,
          type: false,
        },
        endpoints: {
          login: { url: '/v1/auth/login', method: 'post' },
          logout: { url: '/v1/auth/logout', method: 'post' },
          user: { url: '/v1/me', method: 'get' },
        },
        user: {
          property: 'user',
          autoFetch: false,
        },
      },
    },
  },
  proxy: [
    `http://${process.env.API_HOST}:${process.env.API_PORT}${process.env.API_PREFIX}`,
  ],
  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    proxy: true,
    credentials: true,
  },

[mango-martin]

Hi. I'm having the exact same issue and it's driving me nuts. I can't get it to work. I'm sure I've already tried every settings permutation possible but it just won't do it.

We've had project settings like this for quite some time

axios: {
  proxy: true,
}

proxy: {
  '/api': process.env.API_URL
}

privateRuntimeConfig: {
  axios: {
    baseUrl: process.env.API_URL
  }
}

And it works fine.
I've noticed now that the @nuxt/axios Docs state very clearly that you are not supposed to use proxy and baseUrl together and I'm trying to change the setting, thinking this might be the cause of some memory issues that we're having.
So I removed baseUrl and tried replacing it with prefix in privateRuntimeConfig, publicRuntimeConfig, changed the proxy values, added new environment variables suggested by this answer (API_HOST, API_PORT, ...). But ultimately it's always the same problem. I can get one of both to work. Either client requests, or server-side requests. But never both at the same time. Does anyone have any suggestion for proper configuration of this?