仅限Chrome（服务工作者）：'...重定向响应用于其重定向模式不是“跟随”的请求“ [英] Only in Chrome (Service Worker): '... a redirected response was used for a request whose redirect mode is not "follow" '

问题描述

当我在Chrome中刷新（或离线）时，我会收到无法访问此站点，并且以下内容已登录到控制台：http：// localhost：8111 /的FetchEvent survey / 174 / deployment / 193 / answer / offline / attendee / 240 /导致网络错误响应：重定向响应用于重定向模式不是跟随的请求。。当我在Firefox中刷新时，一切正常。有人可以解释为什么会发生这种情况吗？

When I refresh (or go offline) in Chrome then I get "This site can't be reached" and the following logged to console: 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".. When I refresh in Firefox everything works fine. Could someone explain why this is happening?

这是我简化的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
        })

      })
  )
})

推荐答案

这是由于（相对）近期安全限制的变化可以使用各种响应来满足导航。它应该适用于所有支持服务工作者的浏览器（例如今天的Chrome和Firefox），但是您可能正在使用过时的Firefox版本进行测试。

This is due to a (relatively) recent change in the security restrictions around what kind of responses can be used to satisfy navigations. It should apply to all browsers that support service workers (i.e. both Chrome and Firefox today), but it's possible that you're testing with a version of Firefox that's out of date.

可以在问题跟踪器条目，还有更多背景信息到底层规范。

The background on what changed can be found in this issue tracker entry, and there's also more background on the decision that led to the underlying specification.

在修改服务工作者以处理安全限制方面，如果您当前正在响应具有HTTP 30x重定向的某些URL的导航请求对于不同的URL，您需要注意不要直接将重定向的响应存储在缓存中。

In terms of modifying your service worker to handle the security restriction, if you're currently responding to navigation requests for certain URLs with a HTTP 30x redirect to a different URL, you'll need to take care not to just store that redirected response directly in the cache.

您可以通过检查来判断给定的响应是否被重定向是否 response.redirected 是 true ，如果是这样，请使用此代码（改编自工作箱项目）创建响应的干净副本，然后可以存储在缓存中：

You can tell whether a given response was redirected by checking whether response.redirected is true, and if so, use code along the lines of this (adapted from the Workbox project) to create a "clean" copy of the response that could then be stored in the cache:

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

这篇关于仅限Chrome（服务工作者）：'...重定向响应用于其重定向模式不是“跟随”的请求“的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！