gpt4 book ai didi

javascript - 来自 S3 的图像不适用于 Service Worker

转载 作者:行者123 更新时间:2023-11-30 11:49:21 25 4
gpt4 key购买 nike

我正在将我们的一个网站变成 PWA。它有很多来自 S3 的图像失败并显示以下控制台警告:

“[image url]”的 FetchEvent 导致网络错误响应:一个不是 Response 的对象被传递给 respondWith()。

这是软件代码:

self.addEventListener('fetch', event => {

function onFetch (event) {
// Determine type of asset
var request = event.request,
acceptHeader = request.headers.get('Accept'),
resourceType = 'static';

if(acceptHeader.indexOf('text/html') !== -1) {
resourceType = 'content';
} else if(acceptHeader.indexOf('image') !== -1) {
resourceType = 'image';
}

// Network first for HTML and images
if(resourceType === 'content' || resourceType === 'image') {
event.respondWith(fetch(request)
.then(response => addToCache(request, response)) // read through caching
.catch(() => fetchFromCache(event))
.catch(() => offlineResponse(resourceType))
)
}
}

onFetch(event);

});

function addToCache(request, response) {

if(response.ok) { // only 200s
var copy = response.clone(); // Because responses can only be used once
caches.open(cacheName)
.then(cache => {
cache.put(request, copy);
});

return response;
}

}

function fetchFromCache (event) {

return caches.match(event.request)
.then(response => {
if(!response) {
// A synchronous error that will kick off the catch handler
throw Error('${event.request.url} not found in cache');
}
return response;
});

}

这只发生在来自 S3 的图像上,所有其他图像都按预期工作。有人知道这是怎么回事吗?

最佳答案

我的猜测是来自 S3 的图像响应是不透明的。 (参见:What limitations apply to opaque responses?)

如果启用 CORS in S3 , 和 add the crossorigin attribute to your <img> tags ,那么您的响应都应该启用 CORS。

或者,您可以通过不检查 response.ok 的值来解决您得到不透明响应的事实。在你的addToCache() function——对于不透明的响应,它总是 false。这意味着您可能最终会向缓存添加 4xx 或 5xx 错误响应,而不是有效的图像响应,但这是缓存不透明响应时面临的风险。

关于javascript - 来自 S3 的图像不适用于 Service Worker,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39963788/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com