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

Question

如果我的 Vue.js 应用程序中 axios 请求失败，我将无法访问错误（响应）状态代码。我无法弄清楚为什么“.catch”和“axios.interceptors.response”中的响应都未定义。我遵循了这个说明，它演示了可以使用如下代码轻松访问“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 请求不需要授权。还有各种帖子描述了相同的情况。

Answer 1

我有这样的代码：

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

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

return Promise.reject(error);

Answer 2

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

JSON.stringify(error)

请参阅此 GitHub 问题以获取更多信息：https://github.com/axios/axios/issues/960

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

Answer 3

缺乏

access-control-allow-origin: *

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

添加标头使 axios 可以正常工作。

Answer 4

以下操作在某些情况下可能会有所帮助：

error = JSON.parse(JSON.stringify(error)) 然后尝试阅读

error.propertyNames

 或 

error["propertyNames"]

谢谢

Answer 5

// Add a response interceptor axios.interceptors.response.use(函数(响应){ // 任何位于 2xx 范围内的状态码都会导致该函数触发 // 对响应数据做一些事情 返回响应； }，函数（错误）{ // 任何超出 2xx 范围的状态码都会导致该函数触发 // 对响应错误做一些事情 返回 Promise.reject(错误); });