axios 拦截器 响应 undefined

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

- ronoc4

Answer 1

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

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

后端服务器不应该在OPTION请求上检查身份验证，而应该验证请求是否被发送到接受跨域请求的端点，并在成功时返回成功代码。

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

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

---

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

- Emile Bergeron

---

后端应该如何处理它？我在头部发送了一个令牌。因此，在浏览器控制台上，它显示在上面的图像中，并且在网络选项卡中的响应中它显示“jwt验证失败”。- ronoc4 7小时前 删除 - ronoc4

@ronoc4，我在我的答案中更新了有关预检请求的附加信息。 - Emile Bergeron

Answer 2

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

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

- razon

---

非常感谢，这是一个好的解决方案，我也遇到了同样的问题，并通过在Express中设置Access-Control-Allow-Origin来解决。 - Sagar Ganesh

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

- 4givN

Answer 4

这不是最佳实践，但我用这种方式解决了它。

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

- Reza Hashemi