Cors issue with Cloudflare, Render and Chrome

What is the name of the domain?

api.tyretrackerpro.com

What is the error message?

Access to fetch at ‘https://api.tyretrackerpro.com/api/tyres’ from origin ‘https://app.tyretrackerpro.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.Understand this error

What is the issue you’re encountering

I am following your documentation to deploy my DNS front and my back services. Everything was working fine until I created and setted DNS resolution with Cloudflare. my front-end service (web-scraper-frontend-ofsc.onrender.com) is pointing to → https://app.tyretrackerpro.com/ my back-end service (web-scraper-api-ytit.onrender.com) is pointing to - > https://api.tyretrackerpro.com/ I have Cors origin issue in production : Access to fetch at ‘https://api.tyretrackerpro.com/api/tyres’ from origin ‘https://app.tyretrackerpro.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.Understand this error Dashboard-CKcdH7Sj.js:2 GET https://api.tyretrackerpro.com/api/tyres net::ERR_FAILED

What feature, service or problem is this related to?

I don’t know

1 Like

A CORS error occurs when a web application (client-side) makes a request to a server from a different origin, and the server does not include the necessary CORS headers in its response. This is primarily a server-side configuration issue, but the error appears in the browser due to security restrictions. To resolve it, you need to configure the server to send the appropriate CORS headers (like Access-Control-Allow-Origin) that permit the requesting origin."

CORS is a Browser Security Mechanism, the browser enforces CORS to prevent malicious websites from making unauthorized requests to other domains.

If the server does not explicitly allow the requesting origin (via HTTP headers), the browser blocks the response.

Server Must Send Proper CORS Headers

The server must include headers like:

Access-Control-Allow-Origin: * (allows all domains)
Access-Control-Allow-Origin: https://yourdomain.com (allows a specific domain)
Access-Control-Allow-Methods: GET, POST, PUT (specifies allowed HTTP methods)
Access-Control-Allow-Headers: Content-Type, Authorization (specifies allowed request headers)

You can review the following document:

1 Like

I am having the same issue starting today. Everything was fine until today. No changes were made on our side.

Most of the time → 200 OK but returns the wrong response that is not from our servers:

access-control-allow-credentials: true
access-control-allow-headers: Content-Type      // Not ours
access-control-allow-methods: POST,OPTIONS        // not ours
access-control-allow-origin: http://localhost
access-control-max-age: 86400
alt-svc: h3=":443"; ma=86400
cf-ray: xxx8a1d-KUL
content-encoding: zstd
content-type: text/plain       // not ours

Sometimes → 200 OK and Returns the correct response sent by our servers.

Using Cloudflare WARP fixes the issue but there is no way we could tell our users to do that.

Is there any way to fix this without turning off the proxy and losing all security protections?

1 Like

Same here from Malaysia. We notice if we VPN to other countries outside of Malaysia, it works normal, else it returns the same static header response which is not ours. Further investigation founds that the request did not even reach our origin server. Suspect something wrong with cloudflare malaysia gateway that returning wrong cache response header to browsers.

1 Like

ya, same happened to me, anyway to fix it?

1 Like

I realized this just started happening today on all my domain and subdomains. I did not make any change to my servers across all my subdomains. I now suddenly get the same CORS OPTIONS response:

access-control-allow-headers: Content-Type // Not ours
access-control-allow-methods: POST,OPTIONS // not ours

1 Like

This CORS issue is happening to us as well. In our case, our Access-Control-Allow-Headers is being set to “Content-Type” when it should be “authorization,content-type”. This is only happening on some devices but not others. We can confirm that turning off proxy fixes the problem. This problem happens even without us setting any response header transform rules in Cloudflare.

Can anyone from Cloudflare clarify what’s going on?

1 Like

Fixed

This answer applies if origin server does not setup CORS properly. The MAIN ISSUE is some of CF servers are not honoring origin’s CORS, especially the Access-Control-Allow-Headers which is causing preflight OPTIONS CORS on user’s browser. This is already happening for over 2 weeks.

Same thread I just created: What's up with some of Cloudflare's servers causing intermittent preflight CORS err.

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