Getting error "CORS Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5173/@vite/client"

1

I have a Meteor version 3 application which was running fine in my local laptop, but when I tried to run it in a VM in the cloud, I started getting the following errors:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5173/@vite/client. (Reason: CORS request did not succeed). Status code: (null).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5173/imports/ui/main.js. (Reason: CORS request did not succeed). Status code: (null).

The meteor application is running in localhost:3000, while the Vite module seems to be running in port 5173.

I tried to setup an nginx reverse proxy with wildcard cors, but that hasn’t fixed it. I haven’t yet been able to find a solution for this - anyone has had this error before?

2

Are you using anything to handle CORS yet? I’m using Helmet.

3

I am not using yet any component other that Nginx to manage CORS. I was wondering if this error that I am getting is somehow related to the Vite component as I have found other users with similar problem, but when using Vite with Laravel - e.g. https://laracasts.com/discuss/channels/vite/laravel-vite-issue

Wanted to check if someone has gone through this problem with Meteor + Vite and how to overcome it.

4

You can’t handle it the way you handle other CORS errors?

5

What do you see in the Chrome devtools console logs for this error? I usually see detailed info on exactly which CORS policy is being violated - but I don’t know if that’s provided by Chrome or by Helmet.

6

The meteor application which is running on http://IP_ADDRESS:3000 is failing to load the following scripts running on localhost:5173 due to CORS:

< script src=“http://localhost:5173/@vite/client” type=“module” id=“meteor-vite-client”>
< script src=“http://localhost:5173/imports/ui/main.js” type=“module” id=“meteor-vite-entrypoint-script”>

console gives:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5173/@vite/client. (Reason: CORS request did not succeed).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5173/imports/ui/main.js. (Reason: CORS request did not succeed)

I will try setting up Helmet later today and investigate/test it further.

7

Okay, so you need to add an entry to one or more of these CORS policies:

  • scriptSrc
  • connectSrc

The entry will probably look something like this:

    "http://localhost:5173/",
    "http://localhost:5173/imports/ui/main.js",

I’m not quite sure about the ones with ‘@’ in them yet. Maybe one of these:

"http://localhost:5173/*",
"http://localhost:5173/@vite/client"

You may need to include this as well:

"'self'",

Note the use of both double and single quotes here for self. That took a while to figure out.

Helmet is a React component. Are you using React?

8

Thanks for the help @vikr00001! I am not using React - I am using Meteor + Vue3 + Tailwindcss. But seems Helmet is a node.js module, perhaps it can be used as well in this context? I will test it later today.

1 Like
9

@ manuelmateus, you’re very welcome. How’s it going so far?

10

I was troubleshooting yesterday, but was not able to solve it, even after multiple changes in helmet and nginx configuration. What has solved it has been to run meteor with the production flag (“meteor --production”).

1 Like