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

Question

W3:

6.2跨源资源和CORS
应用程序倾向于缓存来自CDN或其他来源的项目.可以直接使用<script>, <img>, <video> 和<link>元素请求其中许多.如果这种运行时协作在离线时破坏,那将是极大的限制.类似地,当设置适当的CORS头时,XHR可能有许多种类的非原始资源.

ServiceWorkers通过允许Caches获取和缓存非原始项来实现此功能.但是,有一些限制.首先,与在Cache中作为Response属性设置为"basic"的Response对象管理的同源资源不同,存储的对象是类型属性设置为"opaque"的Response对象.类型为"opaque"的响应提供的API比响应类型为"basic"的表达要少得多; 无法读取或设置主体和标题,也不检查其内容的许多其他方面.它们可以以与响应类型为"基本"相同的方式传递给event.respondWith(r)方法,但不能以编程方式有意义地创建.这些限制对于保留平台的安全不变量是必要的.允许缓存存储它们允许应用程序在大多数情况下避免重新构建.

我已将CORS标题设置为:

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

但我仍然得到一个"不透明"的响应,我无法确保代码是200.如果我缓存这些不成功的响应,它将导致一些问题.

例如,一个网络密码导致404到跨域资源,并且我将其缓存,然后在网络问题得到纠正时,我将始终使用此404缓存响应.同源资源没有这个问题.

Answer 1

的mode一个的Request(可能)默认为"no-cors".(我说"据说是"因为我相信我已经看到了在启用CORS的情况下隐式创建Request用于fetch()结果的情况Response.)

因此,如果您知道服务器支持CORS,那么您应该明确选择加入CORS:

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

给定一个正确配置的远程服务器,启用CORS,Request将导致Response具有type的"cors".不像"opaque" Response中,"cors" Response将暴露的底层status,body等等.