I'm hoping to figure out why an API request in a React application running in Firefox is failing.
Headers are as follows:
Accept */*
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Connection keep-alive
DNT 1
Host backend:8080
origin http://localhost:3000
Referer http://localhost:3000/
User-Agent Mozilla/5.0 ...
On Chrome, an opaque message tells of some sort of network(ish) error:
request.js?176a:41 GET http://backend:8080/api/foobar/
net::ERR_NAME_NOT_RESOLVED
On Firefox, there seems to be a bit more info:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://backend:8080/api/foobar/. (Reason: CORS request did not succeed).
I have a environment composed of two relevant nodes, frontend and backend. frontend is running a server hosting the React frontend bits. backend is a Flask app providing a set of simple JSON APIs. The intent is for frontend to call backend via JSON APIs.
The docker-compose config is such that they're running on the same logical network. At first, I had suspected the issue was a docker-compose issue, and maybe some DNS mishap. However, I was able to exclude this case by manually stopping the frontend node, and manually re-attaching the same container to the network so I could run a bash shell and ping the backend host. Furthermore, I was able to fetch the same bits via curl from the backend. So this excludes it being a Docker networking issue (I think).
The next logical culprit is something to do with CORS. The frontend request is hitting a distinct domain, (e.g. backend) so this could explain the behavior.
Following the docs listed in the dev console of Firefox the claim is a "fundamental network error of some kind" occurred.
For good measure, I set up Flask-CORS on the backend and verified the right headers are being relayed from the server. To be precise, Access-Control-Allow-Origin: *.
Yet, from the logs of the backend server - there are still no new network requests being made. I had speculated that maybe there was an OPTION request being fired at the backend per the special case described in the Mozilla CORS Docs, and that was failing. Yet that would at least have triggered a log entry in the Flask console output indicating an OPTION request was fired. To indulge my paranoia I even broke out Wireshark. There doesn't even appear to be any relevant network requests being emitted from Firefox (nor Chrome) !
Odds are I am over complicating this, and it's something painfully simple. But would love some pointers in the right direction.
