axios 拦截器响应未定义答案

【问题标题】：axios interceptors response undefinedaxios 拦截器响应未定义
【发布时间】：2018-09-27 21:43:34
【问题描述】：

我正在尝试在用户收到 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 是未定义的。我不确定有什么问题？有任何想法吗？

【问题讨论】：

标签： javascript vue.js axios interceptor

【解决方案1】：

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

这与CORS 的工作方式以及您的后端如何处理OPTION 请求有关。要了解后端服务器应如何处理预检请求，了解what is the motivation behind introducing preflight requests.

很重要

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

然后，浏览器将自动处理最初预期的请求。

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

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

【讨论】：

后端应该如何处理它？我在标头中发送一个令牌。因此，在浏览器控制台上，它会在上图中显示它的内容，并在网络选项卡上的响应中显示“jwt 验证失败” – ronoc4 7 小时前删除
@ronoc4 我用有关预检请求的其他信息更新了我的答案。

【解决方案2】：

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

在我的情况下，为 nginx 401 响应添加 Access-Control-Allow-Origin 标头可以解决问题

【讨论】：

非常感谢，这是一个很好的解决方案，我遇到了同样的问题，并通过从 express 设置 Access-Control-Allow-Origin 来解决。

【解决方案3】：

对于那些仍在为此苦苦挣扎的人，请使用以下错误处理以获得更好的控制

if (error.response) {
  // Request made and server responded
  console.log(error.response.data);
  console.log(error.response.status);
  console.log(error.response.headers);
} else if (error.request) {
   // The request was made but no response was received
   console.log(error.request);
} else {
   // Something happened in setting up the request that triggered an Error
   console.log('Error', error.message);
}
return Promise.reject(error);

【讨论】：

【解决方案4】：

这不是最佳实践，但我是这样解决的

axios.interceptors.response.use(
        response => response,
      error => {
        if (typeof error.response === "undefined") {
          // do somthing
        } 
       return Promise.reject(error);
      }
    )

【讨论】：