ServiceWorker 无故获取外部资源失败答案

【问题标题】：ServiceWorker fails to fetch external resource without reasonServiceWorker 无故获取外部资源失败
【发布时间】：2017-10-07 11:02:28
【问题描述】：

我正在尝试使用服务人员获取和缓存一些外部资源/网站。

我在service-worker.js 中的代码如下：

'use strict';

var static_urls = [
    'https://quiqqer.local/test?app=1',
    'https://quiqqer.local/calendar?app=1'
];

self.addEventListener('install', function (event)
{
    event.waitUntil(
        caches.open('ionic-cache').then(function(cache) {
            cache.addAll(static_urls.map(function (urlToPrefetch)
            {
                console.log(urlToPrefetch);
                return new Request(urlToPrefetch, {mode: 'no-cors'});
            })).catch(function(error) {
                console.error(error);
            }).then(function() {
                console.log('All fetched and cached');
            });
        })
    );
});

创建此输出：

service-worker.js: https://quiqqer.local/test?app=1
service-worker.js: https://quiqqer.local/calendar?app=1
service-worker.js: TypeError: failed to fetch
service-worker.js: All fetched and cached 
(index): service worker installed

获取失败的原因是什么？

我的网站https://quiqqer.local 已将标题Access-Control-Allow-Origin 设置为'*'

也许这是我网站的自签名证书？

我为此证书添加了一个例外，因此如果我打开该站点，Chrome 会在 URL 栏旁边显示该站点不安全，但仍会显示内容。

【问题讨论】：

您在“网络”选项卡中看到了什么？支持CORS 不仅仅是一个标题。
另外：请记住，如果您使用 catch 并且不要在 catch 处理程序中抛出错误或返回被/将被拒绝的承诺，那么您将拒绝转换为分辨率（这就是为什么您看到“所有已获取并缓存”，而实际上并非全部已获取和缓存）。
没有捕获它看起来像这样：
service-worker.js:1 Uncaught (in promise) TypeError: Failed to fetch
在“网络”选项卡中，我看到了两个请求，但状态为“（已取消）”

标签： javascript caching request service-worker fetch-api

【解决方案1】：

由于您明确设置了{mode: 'no-cors'}，因此您将返回一个opaque Response——一个始终具有0 响应代码的@。

如果您尝试添加到缓存的Response 的代码超出2xx 范围，则cache.add() 将throw a TypeError。

由于您在服务器上启用了 CORS，因此通过 Access-Control-Allow-Origin 标头，您只需将其 mode 设置为 'cors' 即可发出请求。 'cors' mode 是跨域 URL 的默认值，所以

cache.addAll(static_urls)
  .then(...)
  .catch(...);

应该给你你想要的行为。

如果您向不支持 CORS 的服务器发出请求，并且想要缓存它，那么您必须明确设置 {mode: 'no-cors'} 并使用 @ 的组合987654337@ + cache.put() 将不透明响应添加到缓存中。（而且您必须承担不透明响应不是 4xx 或 5xx 错误的风险，因为无法知道。）但是，您不必担心，因为您的服务器确实支持 CORS。

【讨论】：