如果 axios 请求失败，error.response 未定义

Posted 2023-03-03

【中文标题】如果 axios 请求失败，error.response 未定义

【英文标题】：error.response is undefined if axios request fails

【发布时间】：2019-04-16 11:01:01

【问题描述】：

如果我的 Vue.js 应用程序中的 axios 请求失败，我将无法访问错误（响应）状态代码。我无法弄清楚为什么“.catch”和“axios.interceptors.response”中的响应都是未定义的。我关注了这个instruction，它表明可以使用如下代码轻松访问“error.response”：

axios.interceptors.response.use(
  (response) =>  
    console.log(response);
    return response;
  ,  
  (error) => 
    handleApiFail(error.response);
  );

如果我将此代码添加到我的应用程序中的“main.js”，则在请求失败时会调用“handleApiFail”，但第二个 lambda 中未定义 error.response 并且不调用第一个 lambda。如果请求成功，则定义第一个 lambda 中的“响应”并具有状态代码。

EDIT1：this 不是一个选项，因为我的 OPTIONS 请求不需要授权。还有各种posts描述了同样的情况。

【参考方案1】：

缺乏

access-control-allow-origin: *

响应中的标头导致浏览器阻止我的请求。

添加标头使 axios 工作正常。

【讨论】：

这是解决导致您提出这个问题的问题还是您的直接问题？

【参考方案2】：

我有这样的代码：

axios.interceptors.response.use(null, (error) => 
    .........
    return Promise.reject();
);

然后，我发现我错过了在承诺拒绝中返回我的“错误”，正确如下：

return Promise.reject(error);

【讨论】：

谢谢，这对我来说也是个问题。

【参考方案3】：

这是 axios 的特性。一个快速的解决方案是序列化响应：

JSON.stringify(error)

有关更多信息，请参阅此 GitHub 问题：https://github.com/axios/axios/issues/960

正如有人指出的那样，您可以检查操作中的错误状态代码并根据它运行一些其他提交。

【讨论】：

您的意思是在第二个 lambda 中添加 'error = JSON.parse(JSON.stringify(error))' 吗？

你是说 Vuex 动作吗？它与 axios 有什么关系？

检查 GitHub 上的讨论，看起来 axios 或 vuex（或两者）正在破坏错误响应。诀窍（正如您所指出的）是 JSON.stringify 然后 JSON.parse 错误。尝试一下，您应该能够看到实际的错误响应

我在拦截器中尝试了'error = JSON.parse(JSON.stringify(error))'，但没有成功。

我对 Vuex 不熟悉，恐怕帮不上什么忙，但您也许可以在 GitHub 讨论中找到解决方案。他们将其标记为非问题并将其关闭，但人们仍在那里发表评论。