如果响应为 404，如何使用 Service Worker 缓存跨域资源？答案

【问题标题】：how to use Service Worker to cache cross domain resources if the response is 404?如果响应为 404，如何使用 Service Worker 缓存跨域资源？
【发布时间】：2016-06-08 03:59:40
【问题描述】：

w3：

6.2 跨域资源和 CORS¶
应用程序倾向于缓存来自 CDN 或其他来源的项目。可以使用<script>, <img>, <video> 直接请求其中许多和<link> 元素。如果这种运行时将受到极大的限制离线时协作中断。类似地，可以 XHR 多种异源资源，当设置了适当的 CORS 标头。

ServiceWorkers 通过允许缓存获取和缓存离源来实现这一点项目。但是，有一些限制。一、不同于同源资源在缓存中作为具有 type 属性集的 Response 对象进行管理到“基本”，存储的对象是具有类型属性集的响应对象为“不透明”。类型为“不透明”的响应提供的 API 比回复键入“基本”；无法读取或设置正文和标题，也不能读取或设置很多对其内容的其他方面进行检查。它们可以传递给 event.respondWith(r) 方法以与键入“基本”的响应相同的方式，但不能以编程方式有意义地创建。这些限制是有必要保留平台的安全不变量。允许缓存在大多数情况下，存储它们可以让应用程序避免重新架构。

我已将 CORS 标头设置为：

Access-Control-Allow-Origin:https://xxx.xx.x.com
Access-Control-Allow-Credentials:true

但我仍然收到“不透明”响应，我无法确保代码为 200。如果我缓存这些不成功的响应，就会导致一些问题。

例如，网络密友导致跨域资源的 404，并且我缓存它，然后我将始终使用这个 404 缓存响应，即使是 thongth 时网络问题得到纠正。同源资源没有这个问题。

【问题讨论】：

标签： javascript caching cross-domain service-worker

【解决方案1】：

Request（据称）defaults to "no-cors" 的 mode。（我说“据称”是因为我相信我已经看到在 fetch() 中使用隐式创建的 Request 导致启用 CORS 的 Response 的情况。）

因此，如果您知道您的服务器支持 CORS，您应该明确选择加入它：

var corsRequest = new Request(url, {mode: 'cors'});
fetch(corsRequest).then(response => ...); // response won't be opaque.

给定一个正确配置的远程服务器，启用 CORS 的 Request 将导致 Response 具有 type of "cors"。与"opaque" Response 不同，"cors" Response 将暴露底层status、body 等。

【讨论】：

waoooooooooooooo~~~~ 非常感谢！！！它真的对我有用。哇~~
这里的问题是您最初是如何通过服务人员隧道发出请求的。如果那些使用“no-cors”，那就是你会得到的。 new Request("x").mode 虽然返回“cors”。

【解决方案2】：

很遗憾，无法检测到它。

出于安全原因，明确不允许：https://github.com/whatwg/fetch/issues/14。

【讨论】：