Блог

Тогда использование nuxtjs/auth и nuxtjs/axios nuxt игнорирует конфигурацию моего прокси.

В прошлом я использовал только axios для аутентификации.

Теперь я пытаюсь использовать модуль @nuxtjs / auth. Поскольку я использую отдельный серверный сервер и CORS, мне нужно использовать axios proxy для аутентификации.

Но стратегия аутентификации local не использует прокси, и я не понимаю почему. Он всегда пытается использовать URL-адрес nuxt. Похоже, что auth абсолютно игнорирует мой прокси. Кто-нибудь может помочь?

 // 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)
      }
    }
  

Мой Nuxt запущен на http://localhost:3000

Мой клиент всегда пытается подключиться к http://localhost:3000/api/auth/login

Но мне нужно http://localhost:4000/auth/login

Я использую все модули в актуальном состоянии

У меня такая же проблема. Но я использую, @nuxtjs/auth-next потому что nuxtjs/auth устарел и использую @nuxtjs/proxy для замены nuxtjs/axios прокси.

1. Вот мои зависимости от pacakge.

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

2. Исправлен файл 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;
  

3. Если вы установили правильно, при запуске npm run dev консоль должна отображать нижеприведенную информацию.

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

proxy Объект должен находиться за пределами axios объекта, т.Е.

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

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