React app set proxy not working with docker compose

I am trying to use the docker compose to build two containers:

  1. React app
  2. A flask server powered with gunicorn

I docker composed them up and both of them were boosted up. When I visited the react, it supposed to proxy the request from the react app with port 3000 to flask server with port 5000. But I encountered this:

frontend_1  | Proxy error: Could not proxy request /loadData/ from localhost:3000 to http://backend:5000.
frontend_1  | See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

which I figure means it still does not know the actual IP address of the backend container.

Here are some configurations:

docker-compose.yml

version: "3"

services:
    backend:
        build: ./
        expose: 
            - "5000"
        ports: 
            - "5000:5000"
        volumes: 
            - .:/app
        command: gunicorn server:app -c ./gunicorn.conf.py

        networks: 
            - app-test
    frontend:
        build: ./frontend
        expose: 
            - "3000"
        ports: 
            - "3000:3000"
        volumes: 
            - ./frontend:/app
        networks: 
            - app-test
        depends_on: 
            - backend
        links:
            - backend
        command: yarn start


networks:
    app-test:
        driver: bridge

backend Dockerfile

FROM python:3.7.3

WORKDIR /app 

COPY . /app 

RUN pip install -r requirements.txt 

frontend Dockerfile

FROM node:latest

WORKDIR /app 

COPY . /app 

gunicorn.conf.py

workers = 5
worker_class = "gevent"
bind = "127.0.0.1:5000"

frontend package.json

{
  "proxy": "http://backend:5000",
}

I tried nearly everything said online, and it just does not proxy the request.

Some information I have already known:

  1. Both containers are worked.
  2. I can ping the internal IP from the frontend container to the backend, and it responds, so no network issues.
  3. when localhost:3000 is requested, my system will call Axios to send a POST request (/loadData) to the backend, where the proxy part should do the work and then the request should become somebackendip:5000/loadData/

Anyone could help me?

Thanks in advance!

Source: StackOverflow