Proxy Error in Containerizing FastAPI Backend and React Vite Frontend

Question

I'm encountering an issue with containerizing the frontend. It seems that the problem lies in using a proxy server on the frontend side, where any signals meant for http://localhost:5173/api get redirected to http://localhost:8000.

On the backend, I've taken care of the CORS policy by allowing any connection for testing purposes. The backend is accessible at http://localhost:8000, while the frontend is at http://localhost:5173.

After running the containers, attempting to access http://localhost:5173/api results in an error appearing on the web console stating: "Failed to load resource: the server responded with a status of 500 ()". In the terminal output generated by the frontend container, I see this error message:

frontend-1    | 10:24:45 PM [vite] http proxy error:
frontend-1    | Error: connect ECONNREFUSED 127.0.0.1:8000
frontend-1    |     at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1602:16)

For context, here's my Docker Compose file

version: '3'

services:
  db_setup:
    build:
      context: ../backend-database
      dockerfile: db_setup.Dockerfile
    volumes:
      - ../backend-database/tablica.db:/usr/local/app/tablica.db

  db_refresh:
    build:
      context: ../backend-database
      dockerfile: db.Dockerfile
    volumes:
      - ../backend-database/tablica.db:/usr/local/app/tablica.db

  backend:
    build:
      context: ../backend-database
      dockerfile: backend.Dockerfile
    ports:
      - "8000:8000"
    volumes:
      - ../backend-database/tablica.db:/usr/local/app/tablica.db

  frontend:
    build:
      context: ../timetable-web
      dockerfile: frontend.Dockerfile
    ports:
      - "5173:5173"

volumes:
  db_data:

db_setup.Dockerfile:

FROM python:3.6-slim

WORKDIR /usr/local/app

COPY /src/setup_db.py ./
COPY /src/requirements.txt ./

RUN pip install --no-cache-dir -r requirements.txt

CMD ["python", "-u", "setup_db.py"]

db.Dockerfile:

FROM python:3.6-slim

WORKDIR /usr/local/app

COPY /src ./
RUN pip install --no-cache-dir -r requirements.txt

CMD ["python", "-u", "main.py"]

backend.Dockerfile:

FROM python:3.6-slim

WORKDIR /usr/local/app

COPY /src ./
RUN pip install --no-cache-dir -r requirements.txt

EXPOSE 8000

CMD ["uvicorn", "api_declaration:fast_api", "--host", "0.0.0.0"]

frontend.Dockerfile:

FROM node:21.6.1-alpine

WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH

COPY package.json ./
COPY package-lock.json ./

RUN npm ci --silent
RUN npm install react-scripts@3.4.1 -g --silent

COPY . /app/

EXPOSE 5173

CMD ["npm", "run", "dev"]

The proxy server initialization on the frontend side is configured in vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api": {
        target: "http://127.0.0.1:8000",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, "")
      }
    }
  }
})

It's worth noting that everything works perfectly fine when running locally. Any insights or help on resolving this issue would be greatly appreciated. Thanks!

I've experimented with port changes.

Answer 1

Changing: target: "127.0.0.1:8000" to target: "http://backend:8000", in vite config file resolved the issue