Docker部署的NuxtJS前端无法调用Django后端verify接口

嘿，我一眼就看到问题所在了——这是Docker容器网络和Nuxt服务端渲染（SSR）的经典坑！

为什么login正常，但verify失败？ #

你提到nuxtServerInit会在页面刷新时调用verify接口，而这个方法是在Nuxt的服务器端容器内执行的，不是在用户的浏览器里。这两者的网络环境完全不同：

• 登录接口（login）是浏览器发起的客户端请求：浏览器能访问你宿主机器的127.0.0.1:8000（因为nginx容器把8000端口映射到了宿主），所以请求能正常到达后端。
• 验证接口（verify）是Nuxt容器内部发起的服务端请求：你代码里的endpoint应该是指向http://127.0.0.1:8000，但在Nuxt容器里，127.0.0.1指的是容器自己，而不是你的后端容器，自然会出现ECONNREFUSED错误。

怎么解决？ #

Docker Compose的服务之间可以通过服务名称直接通信，你的后端服务名叫backend，所以在Nuxt容器内部访问后端应该用http://backend:8000，而不是127.0.0.1:8000。

步骤1：配置Axios区分客户端/服务端请求 #

在Nuxt里，我们可以利用process.server变量来判断当前是服务端还是客户端，然后给Axios设置不同的baseURL：

修改你的nuxt.config.js，添加Axios的配置：

export default {
  // 其他配置...
  axios: {
    // 服务端请求用Docker服务名访问后端
    baseURL: process.server ? 'http://backend:8000/api' : 'http://localhost:8000/api'
  }
}

步骤2：修改Store里的请求代码 #

既然已经配置了Axios的baseURL，你就不需要手动拼接endpoint了，直接用相对路径即可：

export const actions = {
  async refreshAuth ({ dispatch, commit }, token) {
    try {
      // 直接用相对路径，Axios会自动用对应的baseURL
      var { data } = await axios.post('/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 login ({ commit }, { email, password }) {
    try {
      var { data } = await axios.post('/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)
      }
    }
  },
  // nuxtServerInit代码保持不变
  async nuxtServerInit ({ dispatch, commit }, { req }) {
    if (req.headers.cookie) {
      let { token } = cookie.parse(req.headers.cookie)
      await dispatch('refreshAuth', token)
    }
  }
}

额外检查点 #

• 确保你的后端容器确实暴露了8000端口：你的docker-compose.yml里backend服务已经expose: - "8000"，这没问题，Docker Compose内部服务可以直接访问这个端口。
• 不需要修改Nginx配置：因为服务端请求是Docker内部网络通信，不会经过Nginx，只有客户端请求才会走Nginx的端口映射。

这样修改后，不管是客户端的login请求，还是服务端的verify请求，都能正确找到对应的后端服务了！

内容的提问来源于stack exchange，提问作者Christopher Davies