Using default Docker network on MacOS: proxy React requests to Flask container

I am working on configuring the proxy requests from my React app to my Flask app. As my setup is now, React is throwing the error:
Proxy error: Could not proxy request /flask_endpoint from localhost:3000 to http://pathways_api_1:5000. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

I read in the docker networking documentation that within the default network, you must refer to the name of the container as the prefix. Therefore, I include the line:
"proxy": "http://pathways_api_1:5000" in my package.json, as pathways_api_1 is the name of the backend container according to the docker network inspect command.

Here is a snapshot of my docker network: “Containers”: {
“0ad70bf6b1c70993cf960416fe93596913954179ec8d5e31a08115896445029e”: {
“Name”: “pathways_client_1”,
“EndpointID”: “d5f5c9fedd4d0dcd581aeee29d97ecc8e7a6623331454f999308e93dc847d597”,
“MacAddress”: “02:42:ac:12:00:03”,
“IPv4Address”: “172.18.0.3/16”,
“IPv6Address”: “”
},
“0fd9948ee7d3b1e242d56852b05cb2d88dab9e4000fa2b4f685bcd9950abb84e”: {
“Name”: “pathways_api_1”,
“EndpointID”: “c9826edfc750eb65d1a7b0ed95bb7d01da44344bbe730b2c61ccc5e2d10f2a24”,
“MacAddress”: “02:42:ac:12:00:02”,
“IPv4Address”: “172.18.0.2/16”,
“IPv6Address”: “”
}
},``

Additionally, I am using the following docker-compose.yml:

`
version: ‘3.7’
services:
client:
build:
context: ./react-app
dockerfile: Dockerfile
tty: true
ports:
- “3000:3000”
volumes:
- ./react-app:/app
- /app/node_modules

api:
build:
context: ./react-app/api
dockerfile: Dockerfile
ports:
- “5000:5000”
`

If anyone has any insight into what is going wrong here, that would be amazing. thank you for your assistance!

You’re kindof on the right track, except thats not the correct names, its relative to the ones in docker-compose

so for you its just “api” or “client” :slight_smile:

I see. I have actually tried that, and I, unfortunately, got the same error: Proxy error: Could not proxy request /flask_endpoint from localhost:3000 to http://api:5000. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED). Could there be something else that I am missing? Thanks for your help!

Is the application listning on port 5000?
can you from the client container, ping the api container?
(docker exec -ti pathways_client_1 ping api)

Thanks for your help! I was able to resolve the issue. It turns out the way I was making Axios requests with react had to be tweaked slightly to work with docker. I needed to use syntax like axios post http://api/backend_endpoint rather than axios post backend_endpoint It turns out the latter only worked on my local network.