Question

我使用服务工作者从其他域缓存资源。我收到此错误“ TypeError：请求失败serivce-worker.js：12”我不知道为什么会发生此错误。

service-worker.js

var cacheNames=['v1'];
var urlsToPrefetch=['file from other domain'];

self.addEventListener('install', function (event) {
    event.waitUntil(
        caches.open(cacheNames).then(function(cache) {
            console.log('Service Worker: Caching Files');
            cache.addAll(urlsToPrefetch.map(function (urlToPrefetch) {
                console.log(urlToPrefetch);
                return  new Request(urlToPrefetch, {mode: 'no-cors'});
            })).catch(function(error){
            console.log(error);
            });
        })
    );
});

self.addEventListener('fetch', function(event) {
    console.log('Service Worker: Fetching');
    event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});

Answer 1

这是处理不透明响应（使用mode: 'no-cors'获取的响应）的副作用。以下是this longer answer的摘录：

开发人员might run into响应不透明的一个“陷阱”涉及将其与Cache Storage API一起使用。有两个相关的背景信息：

不透明的响应的status属性为always set to 0，无论原始请求成功还是失败。
如果任何请求产生的响应具有不在add()中的状态代码，则Cache Storage API的addAll() / 2XX range方法都将拒绝。

从这两点来看，如果在add() / addAll()调用中执行的请求导致响应不透明，则将无法将其添加到缓存中。

您可以通过显式执行fetch()然后用不透明的响应调用put()方法来解决此问题。这样，您就可以有效地避免正在缓存的响应可能是服务器返回的错误的风险。

const request = new Request('https://third-party-no-cors.com/', {mode: 'no-cors'});
// Assume `cache` is an open instance of the Cache class.
fetch(request).then(response => cache.put(request, response));

服务人员-TypeError：请求失败

1 个答案: