javascript - 在 axios 中检测 xhr.status === 0

Question

上下文

我有一个在企业环境中运行的网络应用程序，其中所有请求都通过我无法控制的代理。该层会根据需要自动将我的用户重定向到不同域上的单点登录页面。

这是基本顺序:

1. 用户在浏览器中输入 myapp.example.corp
2. 请求通过代理，该代理检查用户是否已登录
3. 用户尚未登录，因此他们会被重定向到 auth.example.corp 登录
4. 用户登录，然后重定向到我的应用

到目前为止一切顺利。

问题

我想问的问题出现在以下场景:

用户在我的应用中执行一些操作，然后回家，让浏览器选项卡保持打开状态

经过一段时间后，用户的 session 就会过期

用户返回浏览器选项卡，我的应用已打开并继续使用它

我的应用发出 AJAX 请求，并且它们通过相同的代理

由于用户不再登录，这些请求将重定向到登录页面

由于登录页面位于不同的域中，因此以下内容将记录到浏览器控制台，这对于了解正在发生的情况非常有用

Failed to load https://auth.example.corp: No 'Access-Control-Allow-Origin'
header is present on the requested resource. Origin 'https://myapp.example.corp'
is therefore not allowed access.

(这个问题与 CORS 无关。我无法控制代理或身份验证服务器。请不要分心。😉)

真正的问题是，在我使用 axios 的应用程序代码中，我传递给 axios 的回调永远不会被调用。此请求的 promise 永远不会得到解决或拒绝。我在代码中检测不到任何事情发生。

// none of these callbacks get called
axios
  .get("/signedin")
  .then(response => console.log("Signed in"))
  .catch(response => console.log("Not signed in"))

解决方法

如果我改用 XMLHttpRequest API，我就能够检测到这种情况，因为 onreadystatechange 事件会触发，并且我可以测试 request.status = == 0.

var request = new XMLHttpRequest();
request.onreadystatechange = event => {
  if (request.readyState === 4 && request.status === 0) {
    console.log("Not signed in");
  }
};
request.open("GET", "/signedin");
request.send();

问题

所以我的问题是:我真的很想继续使用 axios 但能够检测到这种情况。使用 axios 时是否有某种方法可以检测 xhr.status == 0 还是我被迫使用 XMLHttpRequest？

Answer 1

CORS 是问题所在，每当预检请求失败时，浏览器将完全拒绝访问返回状态代码、响应正文和 header 等内容。这就是为什么 axios 永远不会知道这一点，也可能是 promise 未关闭的原因这有点类似于没有任何超时限制的网络故障。但是你可以尝试这样的拦截器来检测这种情况

axios.interceptors.response.use((response) => response, (error) => {
  if (typeof error.response === 'undefined') {
      //alert the failure
  }
  return Promise.reject(error);
});