When I’m visiting my website : https://< myDomainName >/ and then click - blogs (on top) and then internally it’s (frontend- React/nextjs) calling an API hosted on same server/different port (backend - Nodejs) and its loading Blogs normally as it is supposed to do.
But If you Refresh the page on the blogs page (or directly enter that URL - https://< myDomainName >/blogs ) then It fails and throws error. ERROR: 500 Internal Server Error or sometime 502/503 ERROR on similar pages wherever API request are made.
On checking , the code fails to make API request to backend (https://< myDomainName >/api/blogs ) hosted on same server.
I don’t understand why this request is failing every time only on page refresh, but not on normal page clicks. On googling, it seems like Cloudflare is blocking that API request (I don’t know why) because I added checks on backend to show if any API request is made it’ll log. So it logs API request on normal page clicks but on page refresh it doesn’t show any API request that reached backend (through cloudflare).
What possibly could be the issue? Any help would be appreciated.
I’m facing this issue on all the pages with the API calls and only on page refresh.
NOTE: This issue is not coming in my local system in development mode and neither this issue was coming while I had directly connected my Domain provider with AWS hosting!. Its only coming after adding cloudflare as middleware for https.
Also, I checked every configuration, everything is fine. (therefore website works and API call too on normal page clicks)
uag=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.128 Safari/537.36