Use name of Docker (Flask) service inside package.json of React app - reactjs

Question

I'm trying to have my React front end application interact with a Flask API, both Dockerized and built together with docker-compose. Here is the docker-compose.yml file:
version: "3.9"
services:
server:
build: ./server
ports:
- "80:5000"
volumes:
- ./server:/app
environment:
FLASK_ENV: development
env_file:
- ./.env
web:
build: ./app
ports:
- "3000:3000"
volumes:
- ./app:/user/src/app
depends_on:
- server
The package.json looks like this:
{
"name": "housing",
"version": "0.1.0",
"private": true,
...
"proxy":"http://server:80"
}
And then in App.js file trying to call the API with:
callAPI( some_arg ) {
var h = new Headers();
h.append("Content-Type", "application/json");
h.append("Access-Control-Allow-Origin", "*");
var raw = JSON.stringify({"some_arg":some_arg});
var requestOptions = {
method: 'POST',
headers: h,
body: raw,
redirect: 'follow'
};
const url = '/api/some_service'
fetch(url, requestOptions).then(res => res.json()).then(data => {
this.setState({some_component_data: data});
});
}
Unfortunately doing this results in an error:
Proxy error: Could not proxy request /api/some_service from localhost:3000 to http://server:80.
It works fine if I replace server with 0.0.0.0 but I'd quite like to use the actual container name in package.json. How can I do this?

Answer 1

My use case is a little different (django + redis), but I would try some combination of these 2 things:
Remove the http:// and just use server:80
Specify container_name in your docker-compose file. I don't know if this is actually necessary or if it uses the service name to connect, but worth a shot if the first thing doesn't work alone.
For my use case, the connection string is just redis://redis and the docker-compose section for that service looks like this:
redis:
image: redis
container_name: redis
restart: always
command: redis-server --requirepass <password>
volumes:
- redis_data:/data
ports:
- "6379:6379"