Как использовать рабочий ящик для кэширования активов CDN без поддержки CORS

Как использовать рабочий ящик для кэширования активов CDN без поддержки CORS

Я хотел использовать рабочую коробку для кэширования своих активов через сервисного работника. И я использую workbox-webpack-plugin для предварительного кэширования ресурсов. Он отлично работает при локальном использовании на dev.

Проблема в том, что на производстве активы находятся на CDN. Я использовал опцию modifyURLPrefix чтобы переписать URL ресурса JS в CDN, хорошо! Проблема, с которой я сталкиваюсь, состоит в том, что CDN не поддерживает CORS, и рабочий ящик выполняет все запросы с использованием CORS. Перебирая документы снова и снова, я попытался использовать пользовательский плагин выборки.

 const customFetchPlugin = { requestWillFetch: ({ request }) ={amp}gt; 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. 

В этот момент у меня кончились идеи. Пожалуйста, дайте мне знать, что я могу сделать неправильно, чтобы заставить эту работу? Благодарю.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector