NuxtJS Auth Proxy

Question

Then using nuxtjs/auth and nuxtjs/axios nuxt is ignoring my proxy configuration.

In past I have used just axios for auth.

Now I am trying to use the @nuxtjs/auth module. Because I use a seperate backend and CORS I need to use axios proxy for auth.

But the auth stragegy local doesnt use the proxy and I dont get why. It always tries to use the nuxt URL. Seems like auth is absolutely ignoring my proxy. Can anyone help?

// nuxt.config
// ...
axios: {
    proxy: true
  },
  proxy: {
    '/api/': {
      target: 'http://localhost:4000',
      pathRewrite: { '^/api/': '' }
    }
  },
  /*
  ** Auth Module Configuration
  ** See https://auth.nuxtjs.org/schemes/local.html
  */
  auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: '/api/auth/login', method: 'post', propertyName: 'token' },
          logout: { url: '/api/auth/logout', method: 'post' },
          user: { url: '/api/auth/user', method: 'get', propertyName: 'user' }
        }
      }
    }
  },
// ..

// Component
async userLogin() {
      try {
        let response = await this.$auth.loginWith('local', { data: this.login })
        console.log(response)
      } catch (err) {
        console.log(err)
      }
    }

My Nuxt is running on http://localhost:3000

My client always tries to connect to http://localhost:3000/api/auth/login

But I need http://localhost:4000/auth/login

I use all modules up to date

score 1 · Answer 1 · answered Sep 05 '22 at 03:21

I have same problem. But I use @nuxtjs/auth-next because nuxtjs/auth is outdated and use @nuxtjs/proxy to replace nuxtjs/axios proxy.

Here is my pacakge dependencies.

// pacakge.json
"dependencies": {
  "@nuxtjs/auth-next": "^5.0.0-1648802546.c9880dc",
  "@nuxtjs/axios": "^5.13.6",
  "@nuxtjs/proxy": "^2.1.0",  
  "nuxt": "^2.15.8",
  // ...  
}

Fixed nuxt.config.

// nuxt.config.ts
import type { NuxtConfig } from '@nuxt/types';
 
const config: NuxtConfig = {   
  ssr: false,
  
  // ...ignore
  
  modules: [     
    '@nuxtjs/axios',
    '@nuxtjs/proxy',     
    '@nuxtjs/auth-next',
  ],
   
  auth: {          
    strategies: {
      local: {
        name: 'local',
        endpoints: {
          login: { url: '/api/auth/login', method: 'post', propertyName: 'token' },
          logout: { url: '/api/auth/logout', method: 'post' },
          user: { url: '/api/auth/user', method: 'get', propertyName: 'user' }
        }
        // ...ignore
      },
    },
  },
  proxy: {
    '/api': {
      target: 'http://localhost:4000/',    
      secure: false,
      // CORS problem need to set true,
      changeOrigin: true,
      pathRewrite: {
        '^/api' : '/'
      }
    },
  }
};
  
export default config;

If you set correct, when you run npm run dev the console should show below info.

[HPM] Proxy created: /api  -> http://localhost:4000/
[HPM] Proxy rewrite rule created: "^/api" ~> "/"    
[HPM] server close signal received: closing proxy server

score -2 · Answer 2 · answered Oct 18 '21 at 11:58

-2

The proxy object should be outside of the axios object, ie

axios: {
 proxy: true,
 // Your other configurations
}

proxy: {
 '/api/': {
   target: 'http://localhost:4000',
   pathRewrite: { '^/api/': '' }
 }
}

answered Oct 18 '21 at 11:58

Arthur Chang

31
3

In the question provided, @equaliser already puts proxy outside of the axios object, the only thing that diferentiates your answer from his question is that he put comas after the object's and you didn't(which causes parsing to fail) – Imeguras Dec 29 '21 at 22:10

NuxtJS Auth Proxy

2 Answers2