0

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://resource.fakesite.com/0.9/assets/index-b9a60426.css' from origin 'https://www.fakesite.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.

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
    },
]

Updated:

This could be related to this issue: https://stackoverflow.com/a/55265139/2598292.

I used the console tool to send two fetch requests:

enter image description here

1.fetch(https://resource.fakesite.com/0.9/assets/index-b9a60426.css`)
2.fetch(https://resource.fakesite.com/0.9/assets/index-b9a60426.css?x-request=xhr`)

The second one works without the 'Access-Control-Allow-Origin' header is present on the requested resource. error.

RedGiant
  • 4,444
  • 11
  • 59
  • 146
  • 1
    Either `https://resource.fakesite.com/0.9/assets/index-b9a60426.css` isn't served by your node.js server, the CORS configuration isn't applied to that particular URL, or there's a cache between you and the server which has an old version of the data without the header. It's hard to tell which, but the error message is pretty clear. – Quentin Jul 04 '23 at 13:25
  • This could be the issue: https://stackoverflow.com/a/55265139/2598292 – RedGiant Jul 13 '23 at 06:26

1 Answers1

0

The missing CORS origin for that specific file is www.fakesite.com, and not fakesite.com, so you may just need to add it to your policy array:

origin: ["fakesite.com", "www.fakesite.com", "resources.fakesite.com"].

This would probably work too: origin: ["*.fakesite.com"]

Javier Rey
  • 1,539
  • 17
  • 27