css - 如何在 CSS 图像上设置 crossorigin ="anonymous"？

Question

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

Workbox 的网站引用设置...

https://developers.google.com/web/tools/workbox/guides/handle-third-party-requests

Answer 1

虽然当浏览器期望 cors 响应时您不能使用 no-cors ( opaque ) 响应，但相反通常是可以的。这意味着您应该能够在服务 worker 中拦截传出的 no-cors 请求，将其重写为 cors 请求，然后两者都缓存该 cors 响应，并将其传递给页面使用。

您可以使用与您的 no-cors .svg 请求匹配的自定义路由来完成此操作，并使用 custom requestWillFetch plugin 实现 CacheFirst 策略重写请求。

我自己还没有测试过，但我认为以下方法可行:

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';

function requestWillFetch({request}) {
  return new Request(request, {mode: 'cors'});
}

registerRoute(
  ({request, url}) => request.mode === 'no-cors' &&
                      url.pathname.endsWith('.svg'),
  new CacheFirst({
    plugins: [{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...
  }],
};