Firefox中Service Worker缓存JSON出现NS_BINDING_ABORTED错误调试求助

问题描述 #

我通过Service Worker实现缓存策略：首次请求从服务器加载并缓存数据，后续相同GET请求直接读取缓存。服务器返回的JSON数据有效，但在Firefox中第二次页面加载时，从Service Worker缓存读取数据失败——JSON被截断，同时出现NS_BINDING_ABORTED错误。

相关截图 #

• 请求失败调试界面：
  
• 截断的JSON数据：
  

调试步骤 #

1. 校验Service Worker缓存写入逻辑 #

• 必须确保缓存响应时克隆Response对象：fetch返回的Response是一次性可读对象，直接复用原对象会导致数据读取不完整。正确写法如下：

  // 错误写法：直接使用原response同时缓存和返回
  caches.put(request, response);
  return response;
  
  // 正确写法：克隆后分别操作
  const clonedResponse = response.clone();
  caches.put(request, clonedResponse);
  return response;
  

• 检查缓存的Response是否包含正确的Content-Length头，Firefox对缓存响应的头部校验更严格，缺失或错误的长度会触发截断。

2. 查看Firefox缓存与Service Worker状态 #

• 打开开发者工具（F12），进入Application -> Service Workers：
  • 确认激活的Service Worker版本，排除旧版本逻辑干扰。
  • 点击Inspect打开Service Worker调试控制台，查看缓存写入时的报错日志。
• 进入Storage -> Cache Storage：
  • 直接查看缓存的Response内容，确认是否在写入阶段就已截断。
  • 对比缓存响应与服务器响应的头部、内容长度是否一致。

3. 跟踪请求数据流 #

• 在Network面板：
  • 勾选Disable Cache测试首次请求，确认服务器返回的JSON完整。
  • 取消勾选后，观察第二次请求是否从Service Worker获取，对比Size字段与服务器返回值是否匹配。
  • 查看Timing标签，确认请求是否在传输过程中被中断。

4. 排查页面侧请求逻辑 #

• 检查页面代码是否提前终止了请求（比如调用abort()），这会直接导致NS_BINDING_ABORTED错误。
• 简化请求处理逻辑，去掉多余的拦截代码，排查是否是页面与Service Worker的交互冲突。

5. 验证API兼容性 #

• 核对使用的Service Worker API是否存在Firefox特有的兼容问题，比如Cache.put()的参数格式、Response对象的处理方式，可参考MDN文档确认细节。

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