Javascript ServiceWorker无故无法获取外部资源

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

我在

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

获取失败的原因是什么

我的网站已将标题

访问控制允许来源设置为“
*
”

可能是我的网站的自签名证书

我为此证书添加了一个例外，因此，如果我打开站点，Chrome会显示该站点在URL栏旁边不安全，但仍然显示内容。
由于您显式设置了
{mode:'no cors'}
，因此您将返回一个-one，它的响应代码始终为
0

如果您试图添加到缓存的
响应
的代码超出了
2xx
范围，则
cache.add（）
将执行此操作

由于您在服务器上启用了CORS，因此通过
访问控制允许来源
标题，您只需将其
模式
设置为
“CORS”
即可发出请求
'cors'
模式
是跨源URL的默认模式，因此

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

应该给你想要的行为

如果您对不支持CORS的服务器发出请求，并且希望缓存它，那么您必须显式地设置
{mode:'no CORS'}
，并使用
fetch（）
+
cache.put（）
组合将不透明响应添加到缓存中。（您必须假设不透明响应不是4xx或5xx错误，因为无法知道。）但是，您不必担心，因为您的服务器确实支持CORS。
您在网络选项卡中看到了什么？支持的不仅仅是一个标题。另外：请记住，如果您使用
catch
，并且没有在
catch
处理程序中抛出错误或返回一个被拒绝/将被拒绝的承诺，那么您就是在将拒绝转换为解决方案（这就是为什么您会看到“所有已获取和缓存”的原因）事实上，当它们没有被抓取和缓存时，它们都被抓取和缓存）。如果没有捕获，它看起来是这样的：service worker.js:1 Uncaught（in promise）TypeError:Failed to fetchIn the Network选项卡我看到了这两个请求，但状态为“（已取消）”