来自S3的图片不能与服务人员合作

我正在将我们的一个网站变成PWA。它已经从S3大量的图片是失败，出现以下控制台的警告：来自S3的图片不能与服务人员合作

The FetchEvent for "[image url]" resulted in a network error response: an object that was not a Response was passed to respondWith().

这里是SW代码：

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图像发生了，所有其他运作正常。任何人都知道发生了什么事？

来源

2016-10-10 Derek Johnson

我的猜测是你S3的图片反应是不透明的。（请参阅：What limitations apply to opaque responses?）

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

或者，您可以通过不检查addToCache()函数中response.ok的值来获得不透明的响应这一事实 - 它对于不透明的响应通常都是错误的。这意味着您可能会可能最终将4xx或5xx错误响应添加到缓存而不是有效的图像响应，但这是缓存不透明响应时运行的风险。

来源

2016-10-11 18:34:23

来自S3的图片不能与服务人员合作

回答

相关问题