CODEWITHSUNDEEP
authenticationproxyaxiosnuxt.js
equaliser
equaliser

Reputation: 171

NuxtJS Auth Proxy

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

Upvotes: 9

Views: 2278

Answers (2)

Changemyminds
Changemyminds

Reputation: 1377

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

  1. 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",
  // ...  
}
  1. 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;
  1. 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

Upvotes: 1

Arthur Chang
Arthur Chang

Reputation: 101

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/': '' }
 }
}

Upvotes: -2

Related Questions