axios 拦截器响应未定义

Posted 2023-03-03

【中文标题】axios 拦截器响应未定义

【英文标题】：axios interceptors response undefined

【发布时间】：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 是未定义的。我不确定有什么问题？有任何想法吗？

【参考方案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);
      
    )