Cors issues(cross-origin Request Blocked)

1

Hello guys. i use vite reactjs and nodejs for an ecommance website with MERN Stack method, all working fine while texting in localhost and after deploying my server to render and my client side to netlify to test my project, i got into series of issues, firstly cross-origin problem
error message: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ‘https://bamstore-store.onrender.com/api/users/getLoginStatus’. (Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’).

here is my cors setup:

/ CORS middleware
app.use(
cors({
origin: “https://bamstoreng.netlify.app”, // Explicitly specify the allowed origin
credentials: true, // Important for cookies, authorization headers with HTTPS
methods: [“GET”, “POST”, “PUT”, “DELETE”, “PATCH”, “OPTIONS”],
allowedHeaders: [
“Origin”,
“Content-Type”,
“Accept”,
“Authorization”,
“X-Request-With”,
],
})
);

i have tried different method even worked with chatGPT but still a dead-end… i used cookies to store token for my header , getLoginStatus and LoginUser… with this issue a user can not login nor register .

testing my render API works perfectly but connecting with netlify gave me this issue,

please who can help me out and any area of my code you will like to review please ask so i can provide it. Thanks in advance

2

Hi there,

Can you check the status code of the call to https://bamstore-store.onrender.com/api/users/getLoginStatus?

Regards,

Keith
Render Support, UTC+10 :australia:

3

while testing my api with curl

user@DESKTOP-05N6HH4 MINGW64 ~
$ curl -i -H “Origin: https://bamstoreng.netlify.app” https://bamstore-store.onrender.com/api/users/getLoginStatus -X GET
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 5 0 5 0 0 2 0 --:–:-- 0:00:01 --:–:-- 2HTTP/2 200
date: Thu, 14 Mar 2024 01:35:54 GMT
content-type: application/json; charset=utf-8
cf-ray: 864087951f6666ea-AMS
cf-cache-status: DYNAMIC
access-control-allow-origin: *
etag: W/“5-fLbvuYullyqbUJDcLlF/4U0SywQ”
strict-transport-security: max-age=15552000; includeSubDomains
vary: Accept-Encoding
access-control-allow-credentials: true
content-security-policy: default-src ‘self’;base-uri ‘self’;font-src ‘self’ https: data:;form-action ‘self’;frame-ancestors ‘self’;img-src ‘self’ data:;object-src ‘none’;script-src ‘self’;script-src-attr ‘none’;style-src ‘self’ https: ‘unsafe-inline’;upgrade-insecure-requests
cross-origin-opener-policy: same-origin
cross-origin-resource-policy: same-origin
origin-agent-cluster: ?1
referrer-policy: no-referrer
rndr-id: fcd989da-2b3a-4016
x-content-type-options: nosniff
x-dns-prefetch-control: off
x-download-options: noopen
x-frame-options: SAMEORIGIN
x-permitted-cross-domain-policies: none
x-render-origin-server: Render
x-xss-protection: 0
server: cloudflare
alt-svc: h3=“:443”; ma=86400

false

my Express server is configured to set Access-Control-Allow-Origin to https://bamstoreng.netlify.app , but the actual response received has Access-Control-Allow-Origin: *

4

it returns false

5

We have the same problem but it turns out the problem is my server is not running, try to check your server maybe your server is not running.

6

Hi there,

It looks like you are using a different CORS config in your api/users route.

We have the same problem but it turns out the problem is my server is not running, try to check your server maybe your server is not running.

Yes, in this case, the response will come from our proxy. These responses will not have CORS headers.

Regards,

Keith
Render Support, UTC+10 :australia:

1 Like
7

my server is running perfectly…and yes there was another cors setup in my user route thank so much for this awareness @Keith

8

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