I am going to try to provide enough detail and info to make this (semi)-reproducible but there are a lot of factors at play so it might be tricky.
I have a full stack app build with React and Python. The front and back end are deployed separately, but both on Render. The domain is hosted with GoDaddy, and I am using a subdomain for the backend to avoid cookie issues.
My app works as expected in Chrome and Safari, but in Firefox I frequently get an error.
The two error messages I see are:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.torsera.com/process_story. (Reason: CORS request did not succeed). Status code: (null).
and
Error:
Object { stack: "Fb@https://www.torsera.com/static/js/main.a32a5f2f.js:2:734425nOw</</m.onerror@https://www.torsera.com/static/js/main.a32a5f2f.js:2:751607nEventHandlerNonNull*Ow</<@https://www.torsera.com/static/js/main.a32a5f2f.js:2:751584nOw<@https://www.torsera.com/static/js/main.a32a5f2f.js:2:750679ne_@https://www.torsera.com/static/js/main.a32a5f2f.js:2:757729n_request@https://www.torsera.com/static/js/main.a32a5f2f.js:2:760570nrequest@https://www.torsera.com/static/js/main.a32a5f2f.js:2:759092nt/<@https://www.torsera.com/static/js/main.a32a5f2f.js:2:761020nJy/<@https://www.torsera.com/static/js/main.a32a5f2f.js:2:728072nWM@https://www.torsera.com/static/js/main.a32a5f2f.js:2:1231453nonClick@https://www.torsera.com/static/js/main.a32a5f2f.js:2:1234296nLe@https://www.torsera.com/static/js/main.a32a5f2f.js:2:39487nVe@https://www.torsera.com/static/js/main.a32a5f2f.js:2:39641n730/jr/<@https://www.torsera.com/static/js/main.a32a5f2f.js:2:59541njr@https://www.torsera.com/static/js/main.a32a5f2f.js:2:59635nFr@https://www.torsera.com/static/js/main.a32a5f2f.js:2:60052n730/$r/<@https://www.torsera.com/static/js/main.a32a5f2f.js:2:65494nuu@https://www.torsera.com/static/js/main.a32a5f2f.js:2:129152nRe@https://www.torsera.com/static/js/main.a32a5f2f.js:2:38619n$r@https://www.torsera.com/static/js/main.a32a5f2f.js:2:61346nHt@https://www.torsera.com/static/js/main.a32a5f2f.js:2:45742nKt@https://www.torsera.com/static/js/main.a32a5f2f.js:2:45524nEventListener.handleEvent*qr@https://www.torsera.com/static/js/main.a32a5f2f.js:2:60849nBr@https://www.torsera.com/static/js/main.a32a5f2f.js:2:60248n730/zr/<@https://www.torsera.com/static/js/main.a32a5f2f.js:2:60414nzr@https://www.torsera.com/static/js/main.a32a5f2f.js:2:60358n730/t.createRoot@https://www.torsera.com/static/js/main.a32a5f2f.js:2:150747n@https://www.torsera.com/static/js/main.a32a5f2f.js:2:1293094n@https://www.torsera.com/static/js/main.a32a5f2f.js:2:1293227n@https://www.torsera.com/static/js/main.a32a5f2f.js:2:1293231n", message: "Network Error", name: "AxiosError", code: "ERR_NETWORK", config: {…}, request: XMLHttpRequest }
home-page-util-functions.js:233:14
After quite a bit of research I discovered that despite the error mentioning CORS this is not really a CORS issue.
The endpoint I am hitting is returning a 200 response to the options request but the actual POST request is NOT getting any response.
I found various posts on stackoverflow and this mdn doc: mdn but none of this seem to be the issue I am having, because my request does succeed on Firefox occasionally.
I checked my server logs and I found that when my request fails there is always a log like this somewhere in server logs: 499 api.torsera.com/process_storyclientIP="69.180.xxx.xxx" requestID="893c3004-ca76-4fc4" responseTimeMS=29965 responseBytes=0 userAgent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:130.0) Gecko/20100101 Firefox/130.0"
That error doesn’t always seem to appear in the same place in the logs and importantly my backend continues to process the user request even after this error appears.
The notable thing from this error is responseTimeMS=29965 which makes me believe there is some type of timeout happening.
IMPORTANT The backend process I am running is making multiple calls to external apis. So I believe it is my connection with the external apis that is throwing the 499 error.
However, if that is the case I am not sure why it would be browser dependent.
I have tried increasing network.http.connection-timeout in Firefox and that didn’t change anything.
Here are the request headers I am using:
Accept: application/json
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: en-US,en;q=0.5
Alt-Used: api.torsera.com
Connection: keep-alive
Content-Length: 148
Content-Type: application/json
Cookie: _ga_4FS2W9D=GS1.1.172775.5.1.17258.0.0.0; _ga=GA1.1.561638967.1726769877; session=eyJhbGciOiE15OXB1Q0puYmpEN2dRTzlQT09kTnl4VG1
Host: api.torsera.com
Origin: https://www.torsera.com
Priority: u=0
Referer: https://www.torsera.com/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
TE: trailer
If there are any other details that I can provide let me know. I am very determined to get to the bottom of this issue.