僅在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, 
    }); 
    }); 
}