AJAX回调执行window.location触发RequestAbortedError问题求助

我之前也碰到过一模一样的问题，这种错误本质上是浏览器的正常行为，但咱们可以通过调整代码逻辑来避免这个烦人的告警。先给你拆解下背后的原因，再分享几个可行的解决方案：

为什么会出现这个错误？ #

当你在AJAX的success回调里直接执行window.location.href跳转时，浏览器会立即启动当前页面的卸载流程。这会强行中止正在进行的AJAX请求的后续处理——哪怕请求已经返回了响应，浏览器也会因为页面要跳转而中断请求的收尾工作，最终抛出RequestAbortedError。

可行的解决方案 #

• 改用complete回调执行重定向
  把重定向逻辑从success移到complete回调里，complete是无论请求成功还是失败都会触发的回调，在这个时机执行跳转，浏览器的处理会更平滑，不会因为中断请求收尾而报错：

  $.ajax({
    url: '你的接口地址',
    success: function(data) {
      if (data.status === 'invalid') {
        // 先标记需要执行重定向
        window.__needRedirect = true;
      } else {
        // 正常处理你的业务逻辑
      }
    },
    complete: function() {
      // 在请求完成的收尾阶段执行跳转
      if (window.__needRedirect) {
        window.location.href = domain + '/login';
      }
    },
    error: function(xhr, status, error) {
      // 处理其他类型的请求错误
    }
  });
  

• 给重定向加一个微小的延迟
  通过setTimeout给浏览器留几十毫秒的时间完成AJAX请求的收尾工作，再执行跳转，就能完美避开这个错误：

  if (data.status === 'invalid') {
    setTimeout(function() {
      window.location.href = domain + '/login';
    }, 50); // 50ms足够浏览器完成请求收尾，不会影响用户体验
    return false;
  }
  

• 全局捕获并忽略该错误
  如果上面的方案都不适合你的场景，你可以在全局的AJAX错误处理里捕获这个特定错误并直接忽略，避免它弹出告警：

  $(document).ajaxError(function(event, xhr, settings, error) {
    // 判断是否是请求中止的错误，是的话直接忽略
    if (error === 'Request aborted' || xhr.statusText === 'abort') {
      return;
    }
    // 处理其他真实需要关注的错误
    console.error('AJAX请求出错:', error);
  });
  

• 前后端配合优化（根源解决）
  其实从根源上，你可以让服务器直接返回302重定向状态码，而不是返回{data: 'invalid'}。不过要注意：AJAX请求会自动跟随302跳转，但不会主动改变当前页面地址。所以你需要在AJAX的success回调里判断响应的最终URL是否是登录页，或者让服务器在返回302的同时附带标识，再触发页面跳转。这个方案需要前后端配合调整，但能让逻辑更规范。

内容的提问来源于stack exchange，提问作者Craig Howell