如何在现代Chrome、FF、Safari中设置超过60秒的XHR请求超时？

核心结论 #

在现代Chrome、Firefox、Safari浏览器中，可以通过xhr.timeout设置超过60秒的数值，但实际会被浏览器底层网络栈的隐性60秒超时限制覆盖。当请求耗时超过60秒时，网络栈会直接断开连接，返回NETWORK REQUEST FAILED错误，且不会触发XHR的ontimeout事件。

问题细节 #

官方文档仅提及：若XHR设置的超时值大于网络栈的超时值，网络栈会先触发超时且不执行ontimeout回调，但并未公开这个网络栈超时的具体数值。实测显示主流浏览器的这个隐性限制约为60秒——比如在Chrome中设置xhr.timeout = 65000，当请求耗时超过60秒时，会直接返回网络错误，而非触发XHR的超时逻辑。

这种情况会在以下场景造成问题：

• 网络连接缓慢，请求还未达到XHR设置的超时就被底层中断
• 依赖第三方托管的后端服务，响应缓慢且无法通过缓存层优化

你提到的Keep-Alive头部确实仅适用于HTTP/1，在HTTP/2及以上版本中已被多路复用机制替代，无法解决这个超时问题。

程序化解决办法 #

1. 拆分长请求为短轮询 #

将长耗时任务拆分为“提交任务+轮询状态”的模式：

• 第一步：发起短请求提交任务，后端返回任务ID
• 第二步：每隔30-50秒发起一次状态查询请求，每个请求的超时设为60秒以内
• 直到查询到任务完成或失败的结果

示例代码：

// 提交任务
async function submitLongTask() {
  const response = await fetch('/submit-task', { method: 'POST' });
  const { taskId } = await response.json();
  return taskId;
}

// 轮询任务状态
async function pollTaskStatus(taskId) {
  return new Promise((resolve, reject) => {
    const interval = setInterval(async () => {
      try {
        const xhr = new XMLHttpRequest();
        xhr.timeout = 50000; // 设为50秒，低于60秒限制
        xhr.open('GET', `/task-status/${taskId}`);
        xhr.onload = () => {
          const data = JSON.parse(xhr.responseText);
          if (data.status === 'completed') {
            clearInterval(interval);
            resolve(data.result);
          } else if (data.status === 'failed') {
            clearInterval(interval);
            reject(new Error('任务执行失败'));
          }
        };
        xhr.onerror = () => {
          clearInterval(interval);
          reject(new Error('状态查询失败'));
        };
        xhr.ontimeout = () => {
          clearInterval(interval);
          reject(new Error('状态查询超时'));
        };
        xhr.send();
      } catch (err) {
        clearInterval(interval);
        reject(err);
      }
    }, 30000); // 每30秒轮询一次
  });
}

2. 改用WebSocket替代XHR #

如果业务场景允许，使用WebSocket建立持久连接：

• WebSocket不受HTTP请求的60秒超时限制，能保持长期连接
• 后端任务完成后主动推送结果给前端，无需前端轮询

3. 结合AbortController实现自定义超时（辅助方案） #

虽然无法突破底层60秒限制，但用Fetch API + AbortController可以更灵活地控制超时逻辑，同时处理网络栈中断的情况：

async function fetchWithTimeout(url, options = {}, timeout = 65000) {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), timeout);
  
  try {
    const response = await fetch(url, {
      ...options,
      signal: controller.signal
    });
    clearTimeout(timeoutId);
    return response;
  } catch (err) {
    clearTimeout(timeoutId);
    // 区分是自定义超时还是网络栈中断
    if (err.name === 'AbortError') {
      throw new Error('请求超时');
    } else {
      throw new Error('网络请求失败');
    }
  }
}

4. 后端异步化改造（若可控） #

如果是自有后端，将同步接口改为异步模式：

• 前端提交任务后立即返回任务ID
• 后端后台执行任务，完成后存储结果
• 前端通过轮询或WebSocket获取结果

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