仅在Chrome（服务工作者）中：'...重定向响应用于重定向模式不是“跟随”的请求

Question

当我在Chrome中刷新（或脱机）时，我得到“This site can'无法达到“并将以下内容记录到控制台：The FetchEvent for "http://localhost:8111/survey/174/deployment/193/answer/offline/attendee/240/" resulted in a network error response: a redirected response was used for a request whose redirect mode is not "follow".。当我在Firefox中刷新一切正常。有人可以解释为什么发生这种情况？

这是我简化的SW。

importScripts("/static/js/libs/idb.js") 

var CACHE_NAME = "upshot-cache-version3" 
var urlsToCache = [...] 

self.addEventListener("install", event => { 
    event.waitUntil(
    caches 
     .open(CACHE_NAME) 
     .then(cache => { 
     urlsToCache.map(url => cache.add(url)) 
     }) 
) 
}) 

self.addEventListener("activate", event => { 
    clients.claim() 
}) 

self.addEventListener('fetch', event => { 
    event.respondWith(
    caches 
     .match(event.request) 
     .then(response => { 

     if (response) { 
      return response 
     } 

     var fetchRequest = event.request.clone() 

     return fetch(fetchRequest).then(response => { 
      if (!response || response.status !== 200 || response.type !== 'basic') { 
      return response 
      } 
      var responseToCache = response.clone() 
      caches.open(CACHE_NAME).then(cache => cache.put(event.request, responseToCache)) 
      return response 
     }) 

     }) 
) 
}) 

Answer 1

这是由于围绕什么样的响应可以用于满足导航的安全限制的（相对）最近的变化。它应该适用于所有支持服务人员的浏览器（即今天的Chrome和Firefox），但可能您正在使用过时的Firefox版本进行测试。

有关更改的背景可以在issue tracker entry中找到，还有more background关于导致基础规范的决定。

在修改您的服务人员以处理安全限制方面，如果您当前正在响应HTTP 30x重定向到其他URL的某些URL的导航请求，则需要注意不要仅存储直接在缓存中重定向响应。

你可以告诉一个给定的响应是否通过检查response.redirected是否true重定向，如果是这样，沿着该线（改编自Workbox项目）使用代码来创建响应的“干净”的副本，可以然后存储在缓存中：

function cleanResponse(response) { 
    const clonedResponse = response.clone(); 

    // Not all browsers support the Response.body stream, so fall back to reading 
    // the entire body into memory as a blob. 
    const bodyPromise = 'body' in clonedResponse ? 
    Promise.resolve(clonedResponse.body) : 
    clonedResponse.blob(); 

    return bodyPromise.then((body) => { 
    // new Response() is happy when passed either a stream or a Blob. 
    return new Response(body, { 
     headers: clonedResponse.headers, 
     status: clonedResponse.status, 
     statusText: clonedResponse.statusText, 
    }); 
    }); 
}