Firefox 58.0.2中Service Worker离线缓存遇重定向错误

嘿，这个坑我之前踩过！这个错误说白了就是你的Service Worker在处理请求时，返回了一个重定向响应（3xx状态码），但浏览器的fetch机制在这种场景下不允许直接返回重定向结果，或者你不小心缓存了不该缓存的重定向响应。下面给你一步步排查和解决的方案：

1. 检查并修复fetch事件的处理逻辑 #

先看看你Service Worker里的fetch监听代码，是不是直接返回了缓存里的重定向响应，或者缓存了网络请求返回的重定向结果。比如很多新手会写的基础缓存代码，就容易犯这个错：

// 错误示例：直接返回所有缓存响应，包括重定向
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then(cachedResponse => cachedResponse || fetch(event.request))
  );
});

正确的做法是，在缓存和返回响应前，先过滤掉重定向状态的响应：

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then(cachedResponse => {
        if (cachedResponse) {
          // 检查缓存响应是不是重定向，是就跳过，直接走网络
          const isRedirect = cachedResponse.status >= 300 && cachedResponse.status < 400;
          if (isRedirect || cachedResponse.type === 'opaqueredirect') {
            return fetch(event.request);
          }
          return cachedResponse;
        }

        // 请求网络时，明确设置跟随重定向（默认就是，但写上更保险）
        return fetch(event.request, { redirect: 'follow' })
          .then(networkResponse => {
            // 缓存前先过滤重定向响应，别把垃圾存进去
            if (networkResponse.status >= 200 && networkResponse.status < 300) {
              caches.open('your-cache-name').then(cache => {
                cache.put(event.request, networkResponse.clone());
              });
            }
            return networkResponse;
          });
      })
  );
});

2. 清除旧的错误缓存 #

因为你之前可能已经把重定向响应缓存下来了，所以得先清掉旧缓存，重新来：

• 打开浏览器F12开发者工具，切到Application标签
• 左侧找到Cache Storage，选中你的缓存名称右键删除
• 再到Service Workers里点击Unregister，刷新页面让Service Worker重新安装

3. 检查服务器端的重定向配置 #

有时候问题根源在服务器，比如页面资源被意外重定向（比如HTTP自动跳HTTPS的配置有问题，或者路径写错导致循环重定向）。你可以直接在浏览器访问出问题的资源，看Network面板里是不是有不必要的重定向，如果是服务器的问题，先修复服务器的重定向规则，再配合Service Worker的逻辑。

4. 特殊处理跨域的opaque重定向 #

如果你的Service Worker要处理跨域资源，可能会遇到opaqueredirect类型的响应，这种响应浏览器是不允许直接返回的，所以一定要像上面代码里那样过滤掉，直接走网络请求。

核心思路就是：绝对不要缓存重定向响应，也不要把重定向响应返回给浏览器，按照上面的步骤调整后，应该就能解决这个错误了。

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