Thursday, 13 July 2023

Workbox unable to cache a specific css file from a react module because of Missing Allow Origin Header

I use Vite PWA to configure the service worker for a react site that uses code splitting and lazy loading. The Workbox manages to precache almost all asset files hosted on a Cloudflare subdomain (resources.fakesite.com) mapped to a S3 bucket. But Workbox is unable to cache a very specific css file from Yet Another React Lightbox due to this CORS error:

Access to fetch at 'https://ift.tt/OnMqyvl' from origin 'https://ift.tt/zxum60Q' 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.

enter image description here

enter image description here

My node server already sets these CORS headers :

  const corsMiddleWare = cors({
    origin: ["fakesite.com", "resources.fakesite.com"],
    credentials: true,
    optionsSuccessStatus:200,
  });

  app.use(corsMiddleWare);

I don't understand why other js and css files are able to get cached by Workbox but not this very specific CSS file due to Missing Allow Origin Header.

My S3 bucket CORS:

[
    {
        "AllowedHeaders": [
            "Authorization",
            "Content-*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "PUT",
            "POST"
        ],
        "AllowedOrigins": [
            "https://www.faksesite.com"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    },
]


from Workbox unable to cache a specific css file from a react module because of Missing Allow Origin Header

No comments:

Post a Comment