服务工作者 - 类型错误：请求失败答案

【问题标题】：Service Worker - TypeError: Request failed服务工作者 - 类型错误：请求失败
【发布时间】：2018-09-28 03:37:53
【问题描述】：

我使用 service worker 来缓存来自其他域的资源。我收到此错误“TypeError: Request failed 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);
      }
    )
  );
});

【问题讨论】：

标签： fetch service-worker fetch-api typeerror

【解决方案1】：

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

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

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

从这两点来看，如果作为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));

【讨论】：