CORS Error while deploy the build to aws cloudfront (with s3 )

[ramsane]

Describe the bug

I have a cra app which I would like to migrate to vite. All the steps are done. we use aws cloudfront to serve the assets with files being uploaded to s3.

We serve the vite build via rails server.

First request goes to rails server, we fetch the index.html from cdn and we will serve it to the browser. But when I deploy this to staging, we are getting CORS Error.
eg. request rails server for the page, we will get index.html with assets to .js and .css with cdn url. It gives cors error.

We were doing the same with create react app. But it was working fine. Now, with vite, it is giving CORS error for starter files.. On observation between the two, I have found one difference in the request headers.

Sec-Fetch-Mode: no-cors --> for react build
Sec-Fetch-Mode: cors --> for vite build

I have tried almost everything. Nothing worked. Any help is greatly appreaciated.

This is basically because assets are present in the cdn and the react app is served using different server (with different url).

Reproduction

NA

Steps to reproduce

Build any sample vite with different base. And serve the build from different domain.

System Info

Mac

Used Package Manager

yarn

Logs

No response

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.