容器化FastAPI后端与React Vite前端时的代理错误问题

问题核心 #

Docker Compose中每个容器拥有独立的网络命名空间，前端容器内的127.0.0.1指向容器自身，而非宿主机。你当前的Vite代理配置指向http://127.0.0.1:8000，导致前端容器无法访问运行在另一容器中的后端服务。

解决步骤 #

1. 修改Vite代理配置 #

将vite.config.ts中的代理target改为Docker Compose中的后端服务名http://backend:8000（后端服务在docker-compose.yml中定义的名称是backend）：

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

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

2. （可选）支持本地/容器环境切换 #

如果需要同时兼容本地开发和容器运行，可通过环境变量动态设置代理目标：

• 修改vite.config.ts读取环境变量：

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

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

• 在docker-compose.yml的frontend服务中添加环境变量：

frontend:
  build:
    context: ../timetable-web
    dockerfile: frontend.Dockerfile
  ports:
    - "5173:5173"
  environment:
    - VITE_API_TARGET=http://backend:8000

原理说明 #

Docker Compose会自动为所有服务创建一个共享网络，并通过服务名进行DNS解析。前端容器使用backend作为域名时，会被解析到后端容器的IP地址，从而实现容器间的通信。而本地开发时，localhost指向宿主机，直接访问后端服务的端口即可正常工作。

内容的提问来源于stack exchange，提问作者M D