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

Posted 2023-02-22

【中文标题】在 Axios OPTIONS 响应中处理状态（例如 503）

【英文标题】：Handle status (e.g. 503) in Axios OPTIONS response

【发布时间】：2018-03-31 11:27:28

【问题描述】：

edit2：https://***.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 版本？

【参考方案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 请求中。

那是因为你没有发送选项请求