开发者问题收集

axios 拦截器响应未定义

2018-04-17
26868
javascript vue.js axios interceptor

我试图在用户收到 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 未定义。我不确定哪里出了问题？有什么想法吗？

错误的 console.dir

3个回答

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

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

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

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

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

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

Emile Bergeron
2018-04-17

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

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

razon
2018-12-06

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

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);
4givN
2020-06-25