Я хотел использовать рабочую коробку для кэширования своих активов через сервисного работника. И я использую InjectManifest workbox-webpack-plugin
для предварительного кэширования активов. Он отлично работает при локальном использовании на dev.
Проблема в том, что на производстве ресурсы находятся в CDN. Я использовал опцию modifyURLPrefix
, чтобы переписать URL ресурса JS в CDN, хорошо! Проблема, с которой я сталкиваюсь, состоит в том, что CDN не поддерживает CORS, и рабочий ящик выполняет все запросы с использованием 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.
В данный момент у меня закончились идеи. Пожалуйста, дайте мне знать, что я могу сделать неправильно, чтобы заставить эту работу? Спасибо.