My React app's proxy not working in docker container

When I working without docker(just run React and Django in 2 sep. terminals) all works fine, but when use docker-compose, proxy not working and I got this error:

Proxy error: Could not proxy request /doc from localhost:3000 to http://127.0.0.1:8000.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

The work is complicated by the fact that each time after changing package.json, you need to delete node_modules and package-lock.json, and then reinstall by npm install (because of the cache, proxy changes in package.json are not applied to the container). I have already tried specifying these proxy options:

"proxy": "http://localhost:8000/",
"proxy": "http://localhost:8000",
"proxy": "http://127.0.0.1:8000/",
"proxy": "http://0.0.0.0:8000/",
"proxy": "http://<my_ip>:8000/",
"proxy": "http://backend:8000/", - django image name

Nothing helps, the proxy only works when running without a container, so I conclude that the problem is in the docker settings. I saw some solution with nginx image, it doesn't work for me, at the development stage I don't need nginx and accompanying million additional problems associated with it, there must be a way to solve the problem without nginx. docker-compose.yml:

version: "3.8"

services:
  backend:
    build: ./monkey_site
    container_name: backend
    command: python manage.py runserver 127.0.0.1:8000
    volumes:
      - ./monkey_site:/usr/src/monkey_site
    ports: 
      - "8000:8000"
    environment:
      - DEBUG=1
      - DJANGO_ALLOWED_HOSTS=localhost 127.0.0.1
      - CELERY_BROKER=redis://redis:6379/0
      - CELERY_BACKEND=redis://redis:6379/0
    depends_on:
      - redis
    networks:
      - proj_network

  frontend:
    build: ./frontend
    container_name: frontend
    ports: 
      - "3000:3000"
    command: npm start
    volumes:
      - ./frontend:/usr/src/frontend
      - ./monkey_site/static:/usr/src/frontend/src/static    
    depends_on:
      - backend
    networks:
      - proj_network

  celery: 
    build: ./monkey_site
    command: celery -A monkey_site worker --loglevel=INFO
    volumes:
      - ./monkey_site:/usr/src/monkey_site/
    depends_on:
      - backend 
      - redis

  redis:
    image: "redis:alpine"

networks:
  proj_network:

React Dockerfile:

FROM node:18-alpine
WORKDIR /usr/src/frontend
COPY package.json .
RUN npm install
EXPOSE 3000

Django Dockerfile:

FROM python:3
ENV PYTHONUNBUFFERED=1
WORKDIR /usr/src/monkey_site
COPY requirements.txt ./
RUN pip install -r requirements.txt

package.json:

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://127.0.0.1:8000",
  "dependencies": {
...

In Django I have django-cors-headers and all settings like:

CORS_ALLOWED_ORIGINS = [
    'http://localhost:3000', 
    'http://127.0.0.1:3000',
]

Does anyone have any ideas how to solve this problem?

Back to Top