Service Worker代理请求状态失败但返回HTTP 200状态码原因咨询

我来帮你拆解下这个有点矛盾的问题——明明HTTP状态码是200，浏览器却标记请求失败，这种情况大多和Service Worker的缓存逻辑、响应处理细节有关，下面是几个最常见的诱因：

1. 响应不符合CacheStorage的存储规则 #

CacheStorage对能存入的响应有不少硬性要求，哪怕状态码是200，只要不满足规则，缓存操作就会失败，进而浏览器把整个请求标记为失败：

• 请求方法限制：默认情况下，只有GET请求能被缓存（除非你手动配置了特殊的Cache API选项，但绝大多数场景都是GET），如果你的请求是POST/PUT等方法，缓存会直接失败
• 响应头限制：如果响应头带有Cache-Control: no-store，或者no-cache且没有配合must-revalidate等字段，CacheStorage会拒绝存储这个响应；另外如果响应的Vary头配置复杂，也可能导致缓存逻辑判断失误
• 跨域请求的CORS问题：如果是跨域请求，即使返回200，若没有正确配置CORS（比如服务器没返回Access-Control-Allow-Origin头），Service Worker无法读取响应内容，缓存失败后浏览器就会显示请求失败

2. Service Worker的fetch事件逻辑有漏洞 #

很多时候是你在处理fetch事件时的Promise链出了问题，比如：

• 没有正确处理缓存操作的错误：如果缓存过程中抛出了未捕获的异常（比如缓存名称写错、响应体已被消耗），哪怕网络请求已经成功返回200，Service Worker的Promise链会因为这个异常被标记为拒绝，浏览器就会认为整个请求失败
• 忘记克隆响应体：响应体是一次性可读的，如果你直接把原始响应传给cache.put()，然后又返回给页面，第二次读取响应体时会失败，导致浏览器判定请求失败。正确的做法是先用response.clone()复制一份再缓存，比如：

  self.addEventListener('fetch', (event) => {
    event.respondWith(
      fetch(event.request)
        .then(response => {
          // 必须克隆响应，避免响应体被消耗两次
          const cachedResponse = response.clone();
          caches.open('my-cache-name')
            .then(cache => cache.put(event.request, cachedResponse))
            .catch(err => console.error('缓存失败:', err)); // 别忘了捕获错误！
          return response;
        })
        .catch(err => console.error('网络请求失败:', err))
    );
  });
  

3. 浏览器DevTools的显示误差 #

有时候DevTools的“失败”标记并不是指网络请求本身失败，而是Service Worker的缓存操作失败，或者DevTools在跟踪代理请求时的状态同步bug。你可以去DevTools的Application > Cache Storage里检查，看看这个请求的响应有没有被成功存储：

• 如果没存储，那肯定是缓存逻辑的问题；
• 如果已经存储了，那大概率是DevTools的显示问题，实际请求是正常的

4. 响应体为空或损坏 #

虽然状态码是200，但如果响应体是空的，或者内容损坏，Service Worker在尝试读取响应体时会失败，进而导致缓存操作失败，浏览器标记请求失败。你可以在DevTools的“Network”标签里查看请求的“Response”面板，确认响应内容是否正常。

快速排查步骤 #

1. 打开DevTools的Console面板，查看Service Worker有没有抛出错误；
2. 检查请求的响应头，确认Cache-Control、Access-Control-Allow-Origin等字段是否符合要求；
3. 去Application > Cache Storage验证响应是否被成功存储；
4. 确认Service Worker代码里有没有正确克隆响应体、处理Promise异常。

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