Javascript 如何在不支持CORS的情况下使用workbox缓存CDN资产

我想通过ServiceWorker使用workbox缓存我的资产。我正在使用

workbox webpack插件

的InjectManifest来预缓存资产。它在dev上本地使用时工作良好

问题是，在生产过程中，资产都在CDN上。我使用

modifyURLPrefix

选项将JS资产url重写为CDN，很好！ 我面临的问题是，CDN不支持CORS，workbox使用CORS发出所有请求。在一遍又一遍地浏览文档之后，我尝试使用一个定制的获取插件

const customFetchPlugin = {
    requestWillFetch: ({ request }) => new Request(request, {
        mode: 'no-cors'
    })
};

然后在路由中使用

workbox.routing.registerRoute(
        /(https:\/\/example\.com\/).*\.(js|css)/,
        new workbox.strategies.StaleWhileRevalidate({
            cacheName: '3rd-cache',
            plugins: [
                new workbox.cacheableResponse.Plugin({
                    statuses: [0, 200]
                }),
                customFetchPlugin
            ]
        })
    );

这对我来说很好，我认为它不应该再遇到CORS错误，但我仍然会遇到CORS错误

Access to fetch at 'https://example.com/xxx.js' from origin 'https://myexample.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

---

现在，我已经没有主意了。请让我知道我可能做错了什么，使这项工作？谢谢。

模式：“无cors”

不会有帮助，不透明的结果看起来不会满足您的需要。我很好奇您为什么要缓存CDN资产。。。为什么不让客户端缓存完成它的工作并节省带宽呢？@service worker的好处是它可以从缓存中交付资产，还可以在后台获取新资产以供下次使用。举个例子：假设我有一个没有长缓存的资产（当您需要某种永久url时，它是有效的）。客户端缓存不会有帮助，而且它也不应该被缓存。但是，使用ServiceWorker，您可以缓存它，并从bat直接为下一个请求提供它，这样您就不用等待资源下载，而且它还可以在后台更新资产以供下次使用。太棒了@昆汀：好问题，但我的问题是，即使使用

模式：no CORS

，我仍然会遇到CORS问题。我知道不透明的请求可能是一个问题，但你可以假设我使用的CDN非常可靠，并且我会始终获得资产交付（除非我使用了错误的资产路径）。@Sumit-如果你获得资产交付，这并不重要-如果你告诉JS不要使用CORS，那么你将无法访问响应中的数据。它所做的只是抑制错误消息。（为什么它不抑制错误消息我不知道，但这听起来像是在浪费时间。