XMLHttpRequest blocked by cors becuase of no "Access-Control-Allow-Origin" despite setting the access control allow origin

Another CORS problem, I’ve been dealing with issue for quite a bit, and haven’t been able to fix it. I’ve tried practically every solution I could find, but to no avail.

So, what is the issue?

I’ve deployed a client, server, and a database to Rendre. They all work fine; I can use Postman to query data from my server, as well as set values and create tables on my database using PG Admin.

However, when I go to my client, I encounter this CORS problem. Below is an image of what I see in the console window when I visit my client site:

image

From what I understand, this is a simple CORS problem, my server is rejecting the request my client is making to it, because the server doesn’t have an “Access-Control-Allow-Origin” to allow the client. So i set the CORS params to allow for it, like so:

app.use(
cors({
origin: “clientURL”,
})
);

ClientUR: https://video-streaming-client.onrender.com/

I redeployed, and the exact same error shows, ok weird, even if I allow all origins by setting the origin to “*” I get the same thing.

Ok let me search the internet, the most common solution I found that worked for everyone, is to not use cors, but rather use res.header, like so:

app.use((req, res, next) => {
res.header(
“Access-Control-Allow-Origin”,
“clientURL”
);
res.header(“Access-Control-Allow-Methods”, “GET, POST, PUT, DELETE, OPTIONS”);
res.header(“Access-Control-Allow-Headers”, “Content-Type, Authorization”);
res.header(“Access-Control-Allow-Credentials”, true);

console.log(“Request received:”, req.method, req.url);

next();
});

This looks better, because it sets the access control allow origin explicitly, but to not avail, still the same issue. When I go to my network tab, this is what I find:

Request URL: clienturl/celebs

Request Method : GET

Status Code : 502 Bad Gateway

Referrer Policy : strict-origin-when-cross-origin

I found another solution on render, but that also didn’t work. I’m taking a wild guess and saying maybe stripe is causing the issue, but I don’t know.

I have other full stack apps on render and they work fine.

In my server Environment Variables, I have this set up:

Access-Control-Allow-Origin = clientURL

The Access-Control-Allow-Origin is set to my client URL, ChatGPT recommended this, but I don’t think it does anything.

Hey, this is Max and I’m currently building blockedbycors.dev which provides free tools to identify CORS issues like the one you are having. You may want to give the CORS debugger a try as it should you identify why your iframes are having trouble accessing your backend.
Maybe your backend doesn’t return the CORS headers that you expect.
I’d love to hear some feedback whether the debugger could help you and I’m happy to help if it didn’t.
Cheers :slightly_smiling_face:

Hey, thanks for the reply and really cool website.

I tested it, and this is what I got:

I went on the CORS Debugger
Inputted my client URL in the “My client app is running at” box
and send an HTTP “GET” request
Inputted my server URL in the “to the server URL” box

and ran a check:

The check is successful:

Response header Access-Control-Allow-Origin: https://video-streaming-client.onrender.com matches request origin https://video-streaming-client.onrender.com.

However if I go to my real client app, the error is still there. If you can see from the screen shot on the post, I also get a CORS error for stripe, I don’t know if that’s somehow causing the issue.

Hey, that’s good to hear. That should at least fix one of your issues. Tbh it’s a bit hard to identify your root issue as the screenshot of your web console is quite cluttered. Maybe you can try to get rid of the 404s and 502s first.
Also check the network tab in the dev tools to identify potential issues.
It seems like you are embedding some iframe that pulls in some Stripe JS code, right? Do you have any browser extensions enabled that could interfere with that?

Hey Thank you.

I finally solved it, the issue was in my database, some columns were set to the wrong type, this was causing the 502 error I believe, and for somereason fixing this removed the CORS errors also.

1 Like

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