如何设置交叉原点="；“匿名”；关于CSS图像？

我正在将我的旧站点设置为PWA。这是一个PHP网站。我的所有站点资产都位于CDN上，我使用附加到每个站点的路径的版本控制标记。我想对它们使用缓存优先策略。为此，我必须将crossorigin=“anonymous”添加到我的所有资产中，以获得cors响应，而不是不透明的响应。内联图像、css、js文件很容易，但是有没有办法让css中引用的图像返回cors？目前它们都是不透明的

引用设置此设置的Workbox站点

---

当浏览器需要

cors

响应时，不能使用

no-cors

（）响应，反之一般可以。这意味着您应该能够在服务人员中拦截传出的

no cors

请求，重写它，使其成为

cors

请求，然后缓存

cors

响应，并将其传递到页面上使用

您可以通过一个定制路由来实现这一点，该路由匹配您的

无COR

.svg请求，并使用重写请求的方法实现

CacheFirst

策略

我自己还没有测试过，但我认为以下方法可以奏效：

从“工作盒路由”导入{registerRoute}；
从“工作盒策略”导入{CacheFirst}；
函数requestWillFetch（{request}）{
返回新请求（请求，{mode:'cors'}）；
}
登记线(
（{request，url}）=>request.mode=='no cors'&&
url.pathname.endsWith（'.svg'），
新缓存优先({
插件：[{requestWillFetch}]，
})
);

您可以使用Workbox构建工具的

generateSW

模式，通过以下配置为您创建此路由：

{
  // ...your other top-level options here...
  runtimeCaching: [{
    urlPattern: ({request, url}) => request.mode === 'no-cors' &&
                                    url.pathname.endsWith('.svg'),
    handler: 'CacheFirst',
    options: {
      plugins: [{
        requestWillFetch: ({request}) => new Request(request, {mode: 'cors'}),
      }],
    },
  }, {
    // ...your other runtime caching entries here...
  }],
};

---

使用GenerateSW（）可以吗？是的，我添加了一个示例配置。