Firefox下Preflight CORS请求间歇性失败问题求助

核心现象 #

• 仅在Firefox浏览器中出现，且集中在笔记本从睡眠状态唤醒之后
• 失败的预请求（Preflight）显示为OPTIONS /<endpoint> undefined，且请求并未到达后端服务器
• 报错信息：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://. (Reason: CORS request did not succeed). Status code: (null).

可能原因与修复方案 #

1. Firefox网络状态缓存异常 #

睡眠唤醒后，Firefox未正确刷新网络连接状态，导致请求的HTTP版本被错误标记为undefined。

• 修复方式：
  • 在代码中加入网络状态检查，通过navigator.onLine判断在线状态，若处于离线状态则等待网络恢复后再发起请求
  • 监听页面visibilitychange事件（页面从后台恢复显示时），主动清除当前域名的缓存（使用caches.delete()），或重新初始化请求实例，避免复用之前的连接池

2. 系统网络栈未重置 #

睡眠唤醒后，系统网络接口可能处于半连接状态，导致Firefox无法正确封装HTTP请求头。

• 修复方式：
  • 监听online/offline事件，当网络恢复时重新创建XMLHttpRequest或Fetch实例，不复用旧连接
  • 使用Fetch API时，添加cache: 'no-store'选项强制不使用缓存连接：

    fetch('http://<some-backend-server>/<endpoint>', {
      method: 'OPTIONS',
      cache: 'no-store',
      headers: {
        'Access-Control-Request-Method': 'POST', // 根据实际请求方法调整
        'Access-Control-Request-Headers': 'Content-Type' // 根据实际请求头调整
      }
    })
    

3. Firefox CORS预请求解析异常 #

网络状态不稳定时，Firefox可能出现预请求HTTP版本解析错误，导致请求无法正常发送。

• 修复方式：
  • 显式指定请求的HTTP版本（部分XMLHttpRequest支持设置withCredentials或强制使用HTTP/1.1）
  • 避免在网络刚恢复时立即发起请求，添加1-2秒延迟，等待系统网络完全恢复

4. 代理/防火墙连接超时 #

睡眠后代理服务器可能已断开闲置的长连接，Firefox复用失效连接导致请求失败。

• 修复方式：
  • 配置后端服务器合理的连接超时时间，避免长连接长时间闲置
  • 在前端请求中添加超时处理，若请求失败则针对唤醒场景自动重试一次

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