ServiceWorker无法无故获取外部资源 [英] ServiceWorker fails to fetch external resource without reason

问题描述

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

I'm trying to fetch and cache some external resources/websites using a service worker.

我在 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

提取失败的原因是什么？

What is the reason for the failing fetch?

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

My site https://quiqqer.local has set the header Access-Control-Allow-Origin to '*'

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

Maybe it's my self-signed certificate for my site?

我为此证书添加了一个例外，因此如果我打开该网站，Chrome会显示该网站不是

I added an exception for this certificate, so if I open the site Chrome shows that the site isn't secure next to the URL bar but the content is still displayed.

推荐答案

因为您明确设置了 {mode：'no-cors'} ，您将获得不透明的响应 -始终具有 0 的响应代码。

Since you're explicitly setting {mode: 'no-cors'}, you're going to get back an opaque Response—one that always has a response code of 0.

cache.add（）将如果抛出 TypeError 您尝试输入的响应 g要添加到缓存中的代码位于 2xx 范围之外。

cache.add() will throw a TypeError if the Response that you're attempting to add to the cache has a code outside of the 2xx range.

因为您已启用CORS服务器，通过 Access-Control-Allow-Origin 标头，您只需将其模式设置为'cors'。 'cors' mode 是跨域网址的默认设置，因此

Because you have CORS enabled on your server, via the Access-Control-Allow-Origin header, you can just make a request with its mode set to 'cors'. 'cors' mode is the default for cross-origin URLs, so

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

应该给您想要的行为。

如果您是在不支持CORS的服务器上发出请求，并且想要对其进行缓存，则必须显式设置 {mode： 'no-cors'} 并结合使用 fetch（） + cache.put（）添加不透明的响应缓存。 （而且，由于没有办法知道，因此您必须承担这种不透明响应不是4xx或5xx错误的风险。） ，您不必担心，因为您的服务器确实支持CORS。

If you were making a request against a server that didn't support CORS, and you wanted to cache it, then you'd have to explicitly set {mode: 'no-cors'} and use a combination of fetch() + cache.put() to add the opaque response the cache. (And you'd have to assume the risk that the opaque response isn't a 4xx or 5xx error, since there's no way of knowing.) But, you don't have to worry about that because your server does support CORS.

这篇关于ServiceWorker无法无故获取外部资源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！