在 Axios OPTIONS 响应中处理状态（例如 503）答案

【问题标题】：Handle status (e.g. 503) in Axios OPTIONS response在 Axios OPTIONS 响应中处理状态（例如 503）
【发布时间】：2018-03-31 11:27:28
【问题描述】：

edit2：https://stackoverflow.com/a/37784969/107282 建议我不必担心，因为在真实设备上不会发生这种情况。

我在 VueJS 混合 (Cordova) 应用程序中使用 Axios，并且正在调用 API。

Axios 在我的 GET/POST 请求之前（正确地）执行“预检”OPTIONS 请求，但如果 API 在那个点返回 503，我的错误处理代码不会被调用。

HTTP.post(url, data, {headers: {Authorization: 'Bearer ' + token.getAccessToken()}})
  .then(response => response)
  .catch(error => {
    // Not reached
  });

如何捕捉这个错误状态？

编辑：来自 chrome 开发工具的屏幕截图：

【问题讨论】：

503的情况下response的内容是什么？ response.data 设置了吗？
我使用 axios 并在 get 操作时遇到由 catch 块处理的 503 错误，状态为 error.response.status
503不是网络错误吗？ axios 不处理网络错误。
@jezmck，我相信预检 OPTIONS 请求是由浏览器发送的，而不是由您的代码发送的，所以我认为它无法被甚至没有启动它的东西处理？
仅供参考：我刚刚通过将 Fiddler 设置为以 503 响应任何 OPTIONS 请求来快速测试这一点，并且仍然能够使用axios 捕获错误。你用的是什么浏览器/axios 版本？

标签： javascript http vue.js http-headers axios

【解决方案1】：

谁想知道什么类型的 http 状态是响应 axios 拦截器是一个例子

    axios.interceptors.response.use(function (res) {
        return res;
      },
      (err) => {
        if(err.response.status == 403 || err.response.status == 503) {
            //handle error of type
            obj[err.response.status] ? obj[err.response.status]() : obj["default"]();
        }
        return Promise.reject(err);
      });

您可以为不同的行为制作带有状态回调的地图。

const obj = {
    503 : () => console.log("Forbidden"),
    417 : () => console.log("is a teepot"),
    'default': () => console.log("Not handle it")
}

【讨论】：

【解决方案2】：

Axios 的 Network Error 没有太多描述性。为了以更好的方式重新抛出它，我们可以这样做，至少描述哪个请求得到了错误，以及发生了什么：

instance.interceptors.response.use(null, error => {
  if (error && error.message === 'Network Error') {
    throw new Error(`Potential network CORS preflight error at ${error.config.url}`);
  }
  throw error;
});

【讨论】：

【解决方案3】：

我能够重现该问题，并且可以找到如下最简单的修复方法

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

正如您在我的测试中看到的那样，我能够得到不同场景的错误和响应

【讨论】：

但这不在 OPTIONS 请求中。
那是因为你没有发送选项请求