Firefox中Service Worker未拦截video资源请求的问题排查

问题场景 #

页面中使用以下标签请求需JWT授权的资源：

<img src="http://localhost:1234/api/getBlob?file=1.jpg">
<video src="http://localhost:1234/api/getBlob?file=2.mp4">

通过Service Worker为请求自动添加Authorization头，逻辑在Chromium系浏览器（Chrome/Edge）和Safari中正常运行，但Firefox仅<img>请求能触发Service Worker的fetch事件，<video>请求完全不进入处理流程；控制台手动执行fetch该视频URL则可正常触发Service Worker。

核心原因 #

Firefox对媒体资源的请求处理存在浏览器特有的逻辑：

• 预加载时机差异：Firefox可能在Service Worker完成激活前就发起video资源的预请求，此时Service Worker尚未接管请求
• 跨域模式默认行为：video资源的跨域请求默认模式与img不同，未显式设置crossorigin属性时，Firefox可能绕过Service Worker直接处理请求
• 请求模式兼容性：Firefox对no-cors模式的媒体请求存在特殊处理，这类请求不会触发Service Worker的fetch事件

解决方案 #

1. 为Video标签添加crossorigin属性 #

显式指定跨域模式，确保请求进入Service Worker处理流程：

<video src="http://localhost:1234/api/getBlob?file=2.mp4" crossorigin="anonymous"></video>

注意：后端需同步配置对应CORS响应头（如Access-Control-Allow-Origin），与前端设置匹配

2. 调整Service Worker的请求模式处理 #

避免强制覆盖原请求的模式，保持与浏览器默认请求模式一致：

// 修改Service Worker中构造请求的代码
const modifiedRequestInit = {
  headers: headers,
  mode: event.request.mode, // 使用原请求的模式，而非强制设为cors
  credentials: 'omit',
};

原代码中强制设置mode: 'cors'可能与Firefox对video请求的默认模式冲突，导致请求被浏览器直接拦截，无法进入Service Worker。

3. 确保Service Worker提前激活 #

在主页面注册Service Worker时，配置相关选项确保其尽早接管请求：

// 主页面的Service Worker注册代码
navigator.serviceWorker.register('/sw.js', {
  updateViaCache: 'none',
  scope: '/' // 确保作用域覆盖所有请求路径
});

避免Firefox在Service Worker未激活时就发起video资源的预请求。

4. 检查Firefox浏览器设置 #

• 关闭"增强型跟踪保护"的严格模式，该模式可能阻止Service Worker处理部分媒体请求
• 验证about:config中的dom.serviceWorkers.enabled为true，确保Service Worker功能正常

验证方式 #

1. 在Firefox开发者工具的"网络"面板中，查看video请求的"发起者"字段，确认是否由Service Worker处理
2. 在Service Worker的fetch事件开头添加日志，确认是否接收到video请求：

self.addEventListener('fetch', function (event) {
  console.log('Fetch request received:', event.request.url);
  // 原有处理逻辑...
});

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