Question

我有一个带有Django后端和在docker中运行的NuxtJS前端的Web应用程序。后端使用REST framework JWT Auth来控制访问。我的URL文件如下所示：

urlpatterns = [
path('api/auth/login/', obtain_jwt_token),
path('api/auth/verify/', verify_jwt_token),
# other urls here
]

多克尔-compose.yml

version: '3'

services:
  backend:
    build: ./backend
    env_file:
     - deploy.env

    volumes:
      - .:/backend
    expose:
      - "8000"

  nginx:
    image: nginx:latest
    container_name: ng01
    ports:
      - "8000:8000"
    volumes:
      - ./backend:/backend
      - ./nginx:/etc/nginx/conf.d
    depends_on:
      - backend

  web:
    build: ./web
    ports:
      - "80:3000"
    links:
      - backend

当docker容器运行时，这两种方法可以完美地从postman开始工作 - 我能够按预期获得并验证JWT令牌。但是，当前端调用这些方法时，登录方法仍然可以正常工作，但验证方法失败。我的应用程序中有许多其他方法，从前端调用时也可以正常工作。这是我得到的错误：

Error: connect ECONNREFUSED 127.0.0.1:8000

我觉得这很奇怪，因为通常这条消息会暗示某种CORS问题，但正如其他方法一样，我不知道这是怎么回事。

以下是我从前端（在我的store.js文件中）调用登录/验证API的方法。每当用户刷新页面时，nuxtServerInit都会从浏览器cookie中检索令牌并尝试调用verify方法以获取前端的用户配置文件

export const actions = {
  async refreshAuth ({ dispatch, commit }, token) {
    try {
      var { data } = await axios.post(endpoint + '/auth/verify/', { token })
      console.log(data)
      if (data.token) {
        commit('setUser', { token: data.token, profile: data.profile })
      }
    } catch (err) {
      console.error('refreshAuth failed due to an error')
      console.log(err)
    }
  },
  async nuxtServerInit ({ dispatch, commit }, { req }) {
    if (req.headers.cookie) {
      let { token } = cookie.parse(req.headers.cookie)
      await dispatch('refreshAuth', token)
    }
  },
async login ({ commit }, { email, password }) {
    try {
      var { data } = await axios.post(endpoint + '/auth/login/', { email, password })
      await commit('setUser', {
        token: data.token,
        profile: data.profile
      })
    } catch (err) {
      if (err.response.status === 401) {
        commit('setError', 'Invalid credentials')
      }
      if (err.response.status === 403) {
        commit('setUnverified', true)
      }
    }
  }
}

Answer 1

原来这是一个CORS问题。正在从nuxt页面调用login操作，而refreshAuth调用是从nuxtServerInit调用的。奇怪的是，django-cors-headers拒绝来电nuxtServerInit。解决方案是将调用转移到refreshAuth到nuxt中默认布局的created()方法

Nuxt应用程序无法访问一个REST API，但所有其他应用程序都可以使用

1 个答案: