Facing CORS issue only When CloudFare Proxy is enabled

I have one FE angular application hosted on EC2 instance which is not on cloudfare.
I have another BE Rails application which is accessible to FE via API and it is configured on Cloudfare.
FE can easily communicate with the BE application if I set the Proxy status is set to ‘DNS Only’ in cloudfare.

However, when I set the status to ‘Proxied’, I start getting CORS error in the chrome while trying to make request from Angular App to BE api.
If Cloudfare is disabled, I see the response headers like in network tab:

Access-Control-Allow-Headers: access-token,content-type
Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, OPTIONS, HEAD
Access-Control-Allow-Origin: [FE ip/domain]
Access-Control-Max-Age: 0
Connection: keep-alive
Content-Length: 0

But enabling Cloudfare proxied status, starts throwing CORS error.
This issue is only happening on chrome.

2 Likes

I also face the same issue. It doesn’t work on chrome but works on firefox. But, it doesn’t work on android’s firefox.

Have you solved it yet?

nvm, solved it. turns out I just need to wait.