API Calls are failing on Page Refresh but working fine on normal website clicks internally. ERROR: 500 Internal Server Error

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)

…/cdn-cgi/trace
fl=49f70
h=humblebee.live
ip=49.36.146.77
ts=1619100531.126
visit_scheme=https
uag=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.128 Safari/537.36
colo=MRS
http=http/2
loc=IN
tls=TLSv1.3
sni=plaintext
warp=off
gateway=off

It’s not the cloudflare branded 500 error, but the troubleshooting steps below may help!

Error 500: internal server error

Error 500 generally indicates an issue with your origin web server. Error establishing database connection is a common HTTP 500 error message generated by your origin web server. Contact your hosting provider to resolve.

Resolution

Provide details to your hosting provider to assist troubleshooting the issue.

However, if the 500 error contains “cloudflare” or “cloudflare-nginx” in the HTML response body, provide Cloudflare support with the following information:

  1. Your domain name
  2. The time and timezone of the 500 error occurrence
  3. The output of www.example.com/cdn-cgi/trace from the browser where the 500 error was observed (replace www.example.com with your actual domain and host name)

If you observe blank or white pages when visiting your website, confirm whether the issue occurs when temporarily pausing Cloudflare and contact your hosting provider for assistance.

Thanks @AppleSlayer for your quick response. I had aleady saw this error post on Cloudflare support, that’s why I posted here.
As it mentions if the error contains cloudflare in the response http body then I need to contact Cloudflare, therefore I am contacting here.
Also, another reason I am asking here because as I told above, everything is working fine without Cloudflare even on page refresh!.

Please assist

1 Like

So issue resolved? P.S: What’s the link?

Screenshot 2021-04-23 8.10.19 AM
Removing cloudflare, generated another error
The ERR_QUIC_PROTOCOL_ERROR message is an error that’s specific to the Chrome Browser and its use of the Quick UDP Internet Connections (QUIC protocol). … Disabling the Experimental QUIC protocol in Chrome’s settings. Disabling your Chrome browser extensions.

I’m now getting ERR_CONNECTION_CLOSED


Your web server is closing my request, I’d re-add cloudflare so it allows requests to go through