容器化 FastAPI 后端和 React Vite 前端时出现代理错误

Question

我在前端容器化方面遇到了问题。问题似乎在于在前端使用代理服务器，其中任何用于 http://localhost:5173/api 的信号都会被重定向到 http://localhost:8000。

在后端，我通过允许出于测试目的的任何连接来处理 CORS 策略。后端可通过 http://localhost:8000 访问，而前端可通过 http://localhost:5173 访问。

运行容器后，尝试访问 http://localhost:5173/api 会导致 Web 控制台上出现错误，指出：“无法加载资源：服务器响应状态为 500 ()”。在前端容器生成的终端输出中，我看到以下错误消息：

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)

作为上下文，这是我的 Docker Compose 文件

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"]

后端.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"]

前端.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 [email protected] -g --silent

COPY . /app/

EXPOSE 5173

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

前端代理服务器初始化在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/, "")
      }
    }
  }
})

值得注意的是，在本地运行时一切正常。任何有关解决此问题的见解或帮助将不胜感激。谢谢！

我尝试过更改端口。

Answer 1

将目标：“127.0.0.1:8000”更改为目标：“http://backend:8000”，vite 配置文件解决了问题