Workbox precaching does not work with cross origin requests

Question

I'm using the precacheAndRoute() function to precache a bunch of assets passed to a service worker by the InjectManifest() function of the workbox-webpack-plugin plugin.

This works great, but all of these assets are hosted on a CDN, which means that the requests are cross origin. The problem is that for some reason, Workbox doesn't seem to recognize this, and sends the requests without the Origin header, which means that CORS fails.

I tried overriding the default behavior by initializing the PrecacheController myself, using a plugin to force the request to operate in cors mode:

const precacheController = new PrecacheController({
    cacheName: precacheName,
    plugins: [{
        requestWillFetch: async ({request}) => new Request(request.url, {
            mode: 'cors',
        }),
    }],
});

precacheController.precache(self.__WB_MANIFEST);
registerRoute(new PrecacheRoute(precacheController));

Unfortunately, this still doesn't seem to add the Origin header. Any ideas what might be causing this and how to work around it?

Workbox precaching does not work with cross origin requests

0 Answers0