Question

W3：

6.2跨源资源和CORS
          应用程序倾向于缓存来自CDN或其他来源的项目。   可以使用<script>, <img>, <video>直接请求其中许多   和<link>元素。如果这种运行时，这将是非常有限的   离线时协作破裂了。   同样，XHR可能有多种非原生资源   设置了适当的CORS头。

ServiceWorkers通过允许Caches获取和缓存off-origin来实现此功能   项目。但是，有一些限制。首先，与同源资源不同   它们在Cache中作为Response对象进行管理，并设置了type属性   对于“basic”，存储的对象是具有type属性集的Response对象   “不透明”。类型为“opaque”的响应提供的API比表达式低得多   回复键入“基本”;无法读取或设置主体和标题，也不能读取或设置   检查其内容的其他方面。他们可以传递给   event.respondWith（r）方法与回复类型为“basic”的方式相同，   但不能以编程方式有意义地创建。这些限制是   保护平台的安全不变量所必需的。允许缓存   存储它们允许应用程序在大多数情况下避免重新构建。

我已将CORS标题设置为：

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

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

例如，网络密友导致跨域资源404，然后我会缓存它，然后我会一直使用这个404缓存响应网络问题得到纠正。同源资源没有这个问题。

Answer 1

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

因此，如果您知道服务器支持CORS，那么您应该明确选择加入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等。

Answer 2

不幸的是，没有办法检测到它。

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

如果响应是404，如何使用Service Worker来缓存跨域资源？

2 个答案: