服务工作线程的抓取处理程序中有关 30 倍重定向的限制

Question

我有一个基本的服务工作者，当没有互联网连接时，它会返回一个离线页面。无论网站返回 302 重定向的任何地方，无论联机还是脱机，站点都将因服务辅助角色而中断。

服务辅助角色：

'use strict';
var cache_key = 'offline_cache_v18';
this.addEventListener('install', event => {
event.waitUntil(
caches.open(cache_key).then(function(cache) {
return cache.addAll([
'/offline.html'
]);
})
);
});
this.addEventListener('fetch', event => {
if (event.request.mode === 'navigate' || (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html')) ) {
event.respondWith(
fetch(event.request.url).catch(error => {
return caches.match('/offline.html');
})
);
} else {
event.respondWith(caches.match(event.request).then(function (response) {
return response || fetch(event.request);

}));
}
});

中断服务工作进程的页面：

<?php header('Location: /'); ?>

预期结果：页面照常加载，但脱机时除外，脱机时应显示.html。

实际结果：该网站无法完全加载以 302 重定向响应的网页，理由是"无法访问此网站"。控制台还报告："FetchEvent 导致网络错误响应：重定向响应用于重定向模式不是"跟随"的请求。

尝试：使用 response.status 检查响应代码，并尝试切换代码以使用"workbox"库。还尝试了{重定向："跟随"}参数，但是对于如此简单的事情，它现在似乎变得非常先进。所有"离线页面"教程似乎都有同样的错误。

Answer 1

https://bugs.chromium.org/p/chromium/issues/detail?id=658249 中详细解释了底层安全限制

导航请求会出现此问题，因为这些请求使用'manual'的redirect模式。(大多数其他类型的请求将具有'follow'redirect模式，这意味着可以使用重定向的HTTP 30x响应来满足它们。

您可以通过检查其redirected属性来检测是否具有通过遵循 HTTP 30x 重定向生成的Response对象。

综上所述：如何使用作为 30x 重定向的一部分生成的Response对象来满足导航请求的fetch事件？答案是首先"清理"重定向的响应，方法是创建一个新的(基本相同的)Response对象，但该对象将redirected属性设置为false。

async function cleanRedirect(response) {
const clonedResponse = response.clone();
return new Response(await clonedResponse.blob(), {
headers: clonedResponse.headers,
status: clonedResponse.status,
statusText: clonedResponse.statusText,
});
}

您可以通过检查event.request.redirect === 'manual'是否在fetch处理程序内部来使用它。如果是这样，在调用event.respondWith(response)之前，请检查response.redirected是否true。如果是，则首先将该重定向响应传递给await cleanRedirect()。

(此代码改编自Workbox的实现。Workbox 将自动"清除"预缓存的 URL 的任何重定向响应，但不会对运行时缓存的 URL 执行自动清理。