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

【问题标题】：Nuxt app cannot access one REST API, but all others workNuxt 应用程序无法访问一个 REST API，但所有其他 API 都可以使用
【发布时间】：2018-05-24 11:06:33
【问题描述】：

我有一个在 docker 中运行的带有 Django 后端和 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
]

Docker-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 容器运行时，这两种方法在邮递员中完美运行 - 我能够按预期获取和验证 JWT 令牌。但是，当前端调用这些方法时登录方法仍然可以正常工作，但验证方法失败。我的应用程序中还有许多其他方法在从前端调用时也可以正常工作。这是我得到的错误：

Error: connect ECONNREFUSED 127.0.0.1:8000

我觉得这很奇怪，因为通常此消息会暗示某种 CORS 问题，但由于其他方法有效，我看不出这里是怎么回事。

这是我从前端（在我的 store.js 文件中）调用登录/验证 API 的方式。每当用户刷新页面时，nuxtServerInit会从浏览器cookie中获取token，并尝试调用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)
      }
    }
  }
}

【问题讨论】：

你能发布你的 docker-compose 文件吗？也许您在撰写文件中缺少network_mode: "host"，因为您需要使用相同的本地主机接口从容器内部访问主机。
已经在上面添加了
尝试将network_mode: "host"添加到backend服务
破坏 nginx:ng01 | 2018/05/24 12:32:52 [emerg] 1#1: host not found in upstream "backend:8000" in /etc/nginx/conf.d/nginx.conf:3 ng01 | nginx: [emerg] host not found in upstream "backend:8000" in /etc/nginx/conf.d/nginx.conf:3 ng01 exited with code 1.
这是我的 nginx 配置：upstream backend { ip_hash; server backend:8000; } # portal server { location / { proxy_pass http://backend/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } listen 8000; server_name localhost; }

标签： django docker docker-compose nuxt.js

【解决方案1】：

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

【讨论】：