Nothing fixes "blocked by CORS policy"

1

Hi,

Just a day ago, I made a fullstack app. My folder structure goes like frontend and backend. I used vite.js for frontend and node.js for backend and used socket.io for communication. So here is the problem. When I ran my frontend localhost:5173 and backend on localhost:3000 it worked just fine. Then I uploaded my files to github and cloned them to render seperately for frontend and backend. They both went live but they can’t communicate. It says:

Blockquote
Access to XMLHttpRequest has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Blockquote

I tried using cors(), header(), setHeader() everything. Nothing works. My project folder is here

image
image817×154 3.63 KB

2

Hey,

I see that you’ve set the URL with a trailing slash:

res.setHeader( "Access-Control-Allow-Origin", "https://super-tictactoe-frontend.onrender.com/" );

Typically, you’d want to set it without any trailing slash: “https://super-tictactoe-frontend.onrender.com”

Jérémy.
Render Support, UTC+3

3

Unfortunately, this didn’t help.

I wanna add one more thing. When frontend is loaded I keep getting the same error every 5 second or so.

image
image529×526 38.1 KB

4

Hey,

I’m not entirely sure. Your code looks good at first glance, and we definitely wouldn’t mess with the CORS header. So, it’s either a misconfiguration I’m overlooking in your code, or an issue with the socket.io library, or maybe how you’re connecting to your backend—whether it’s through the socket or an HTTP call, and so on.

Jérémy.
Render Support, UTC+3

5

Thank you for your reply,

I don’t know why but I changed my code to this and it fixed the issue:
image

I mean it looks like nothing changed, it’s bugging me but I’m not gonna dig into it.

Thank you for your help.

1 Like
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.