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 未定义。 我不确定出了什么问题？ 有什么想法吗？

Answer 1

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

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

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

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

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

---

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

Answer 2

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

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

Answer 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);

Answer 4

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

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