CODEWITHSUNDEEP
reactjsflaskcors
BitPusher
BitPusher

Reputation: 1030

CORS request failing in docker-compose environment

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.

Upvotes: 7

Views: 5850

Answers (1)

BitPusher
BitPusher

Reputation: 1030

enter image description here

TLDR - JavaScript runs in the browser (says the backend dev)

The host referred on the frontend should be localhost as the backend port is exposed on localhost via Docker. And the frontend code is running in the browser (as opposed to exclusively in the container). The container was just a process serving up those bits.

The opaque network error was likely a result of referring to a domain name that didn't exist to the host network. Because it was part of the docker-compose virtual network.

Upvotes: 10

Related Questions