axios 拦截器响应未定义

Question

我正在尝试在他们收到 401 后注销我的用户。我正在使用 axios return 来自 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 works and how your backend handles OPTION requests. To understand how the backend server should handle preflight requests, it's important to understand what is the motivation behind introducing preflight requests.

的方式有关

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

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

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

无耻的自我推销，我发布了一个名为 axios-middleware which helps abstract the use of Axios interceptors in bigger apps. It offers an example of middleware that automatically handles unauthenticated requests 的简单 Axios 插件，在重新发送请求之前尝试再次验证。

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

axios 拦截器响应未定义

axios interceptors response undefined

javascript

interceptor

vue.js

axios