CSS CORS issue after nuxt generate

[venkateshgiri]

Hi,

I am currently working on migrating our project from nuxt 2 to nuxt 3. I have created a new project and started to move the code. We are trying to serve the css files via cdn url. All the js files, image files are getting loaded. But css files throws cors error for certain files. The bundler used is vite.

Observations:

component specific css is getting downloaded successfully. But css related to vuetify, scss files inside assets are causing issues. Saying this as css files with component prefix are getting parsed. we have set ssr:false and use nuxt generate to get the files and upload it to s3 and serve via fastly url.

The GET request is 200. But CORS error.

The repo we use is kind of specific to org.

The vite version we are using is "vite": "^6.0.5" under vite builder as a dependency in package-lock.json. Attaching the screenshots of the dependency list.

Sharing the config file as well:

After the nuxt generate the cross origin attribute is present on the link tags in index.html file under .output/public.

<link rel="stylesheet" href="https://-------/_nuxt/entry.CvBYcn7H.css" crossorigin>

Reproduction

Steps to reproduce

No response

System Info

*

Used Package Manager

npm

Logs

Created an issue on nuxt repo as well.
nuxt/nuxt#30697

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

I guess you need to set the Access-Control-Allow-Origin header in your CDN so that it can be fetched from your site. This is because Vite adds crossorigin attribute to <link rel="stylesheet">. This is not configurable in Vite (for now) (Related issue: #6648).
But even if you were able to configure it, I recommend setting the Access-Control-Allow-Origin header because you'll probably have to set it anyways as ESM requires CORS settings.

[venkateshgiri]

Thanks @sapphi-red.
I have also added route rules in nuxt.config.ts. Should we have to change some settings on the server ?

We use ssr:false and using nuxt generate for the application.

One more thing that i observed is that the css that is successful is not part of link tags.

[sapphi-red]

I'm not sure where you need to configure it as it depends on how and where you deploy it and I don't know much about nuxt/nitro options. At least what I can say is that the response of the CSS files does not seem to have the CORS headers and it needs to be set.

[venkateshgiri]

Okay @sapphi-red . We upload the files to S3 and serve it via Fastly. Our team is confused as few css has the headers set and few are not.

[sapphi-red]

That sounds like the CDN is caching the response. Did you try purging the cache in the CDN?