[FIXED] Dockerized react app cant communicate with dockerized django app

Issue

I have created a django app running at https://localhost:8000 using sslserver with self-signed certificates. My react app running at https://localhost:8000 also with self-signed certificates. When i run those two in a terminal both of them running perfectly and they communicate with each other. My problem is that when i try to run those two from docker desktop when i make a call from the frontend to the backend returns:

2024-01-12 21:43:00 Proxy error: Could not proxy request /main.dd206638be0188052640.hot-update.json from localhost:3000 to https://localhost:8000/.

I should mention that when i make a call to the backend with Postman it runs normaly.

Django settings.py:

ALLOWED_HOSTS = [
    'localhost'
    # Provide the host that the server allows.
]

# Config for CORS-Headers.
CORS_ALLOWED_ORIGINS = [
    # Provide frontend address.
    "https://localhost:3000"
]

React package.json:

"proxy": "https://localhost:8000",

docker-compose.yml

version: '3.10'

services:
  django-backend:
    container_name: proxmox-project-backend
    build:
      context: ./django-backend
      dockerfile: Dockerfile
    image: django-backend:0.0.1
    ports: 
      - '8000:8000'

  react-frontend:
    container_name: proxmox-project-frontend
    build:
      context: ./react-frontend
      dockerfile: Dockerfile
    image: react-frontend:0.0.1
    ports: 
      - '3000:3000'
    stdin_open: true
    tty: true
    environment:
      - HTTPS=true
      - SSL_CRT_FILE=/app/ssl/react.crt
      - SSL_KEY_FILE=/app/ssl/react.key

Solution

Both of the containers have their own loopback interface (unless you are using host networking). I.e., the localhost:8000 address, when used inside the react-frontend container, points to the port 8000 of the react-frontend container.

To proxy the request to the django-backend container you will have to use hostname of that container in the proxy setting:

"proxy": "https://django-backend:8000",

The proxy setting is now different depending on how you are running your development setup, so you'll likely want to parameterize the value of that, but since the proxy setting is only available in the development server, it might be better to parameterize the back-end URL inside your react application.

Answered By - kangasta