Как использовать рабочий ящик для кэширования активов CDN без поддержки CORS - PullRequest
0 голосов
/ 18 октября 2019

Я хотел использовать рабочую коробку для кэширования своих активов через сервисного работника. И я использую 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.

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

...