axios 拦截器响应未定义

Question

一旦他们收到 401，我将尝试注销我的用户。我正在使用 axios 从 api 返回数据

我环顾四周，发现了相同的 axios.interceptors.response

   axios.interceptors.response.use(
    response => response,
  error => {
    const {status} = error.response;
    if (status === 401 ) {
      store.dispatch('snackBar', snackbarObj)
    }
   return Promise.reject(error);
  }
)

看来我的 error.response 是未定义的。我不确定出了什么问题？有任何想法吗？

原文由 ronoc4 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

由于 浏览器 在执行预检时收到 401 未经授权的响应 OPTION 请求，因此您没有从使用 Axios 的请求中得到响应，导致您尝试的请求出现 网络错误 做。

这与 CORS 的工作方式以及后端处理 OPTION 请求的方式有关。要了解后端服务器应如何处理预检请求，了解 引入预检请求背后的动机很重要。

后端服务器不应检查 OPTION 请求的身份验证，它应该验证请求是针对接受跨域请求的端点发出的，如果是，则返回成功代码。

然后，浏览器将自动继续执行最初预期的请求。

这样，如果用户不再通过身份验证，Axios 拦截器将收到 401 错误代码。

---

无耻的自我推销，我发布了一个名为 axios-middleware 的简单 Axios 插件，它有助于在更大的应用程序中抽象使用 Axios 拦截器。它提供了一个中间件示例， 该中间件通过在重新发送请求之前尝试再次进行身份验证来自动处理未经 身份验证的请求。

原文由 Emile Bergeron 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果预检 OPTION 请求成功结束，响应对象也将是未定义的，但下一个响应 GET/POST 不包含 Access-Control-Allow-Origin -7e7bheadfer.

在我的例子中，添加 Access-Control-Allow-Origin nginx 401 响应标头解决了问题

原文由 razon 发布，翻译遵循 CC BY-SA 4.0 许可协议