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()
将如果抛出
您尝试输入的响应 g要添加到缓存中的代码位于 TypeError
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屋!