Docker容器中Nginx+FastAPI跨域请求阻塞问题求助

问题核心 #

你的场景中，本地非容器化运行正常但容器环境出现跨域，本质是浏览器端感知的前端访问地址与后端服务的暴露地址不匹配，容器内部的网络连通（如curl测试通过）无法绕过浏览器的跨域校验，而0.0.0.0是通配所有来源的临时方案，不符合线上部署要求。

合规解决方案 #

1. 精准配置FastAPI的CORSMiddleware #

放弃["*"]的宽松配置，指定前端实际对外暴露的完整地址（包含协议、域名、端口），确保浏览器端的Origin与后端允许的来源完全匹配：

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

# 替换为你实际的前端访问地址，支持多个环境
origins = [
    "http://localhost:8080",  # 本地开发前端地址
    "http://your-production-domain",  # 线上正式域名
    "http://your-staging-domain:8080",  # 测试环境带端口的地址
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,  # 若前端需要携带Cookie，必须开启
    allow_methods=["*"],
    allow_headers=["*"],
)

注意：如果前端使用HTTPS，origins中的地址必须以https://开头。

2. 用Nginx反向代理统一访问入口（推荐线上方案） #

跨域问题的最优解是通过Nginx将前端和后端API路由到同一域名下，彻底规避浏览器的跨域校验。示例配置如下：

server {
    listen 80;
    server_name your-domain.com;  # 替换为你的实际域名

    # 前端静态资源路由
    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;  # 适配SPA路由
    }

    # 后端API反向代理
    location /api/ {
        proxy_pass http://fastapi:8000/;  # fastapi是Docker Compose中后端服务的名称
        # 传递必要的请求头，确保后端能正确识别请求来源
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

配置后，前端调用API时直接使用相对路径/api/xxx，浏览器会判定为同一域名下的请求，不会触发跨域检查。

3. 修正Docker Compose网络配置 #

确保容器间网络连通，同时避免不必要的端口暴露：

version: '3.8'
services:
  frontend:
    image: nginx:alpine
    ports:
      - "80:80"  # 仅对外暴露前端Nginx的端口
    volumes:
      - ./frontend/dist:/usr/share/nginx/html
      - ./nginx.conf:/etc/nginx/conf.d/default.conf
    networks:
      - app-network

  fastapi:
    build: ./backend
    # 无需对外暴露端口，仅通过内部网络被Nginx访问
    networks:
      - app-network
    depends_on:
      - db

  db:
    image: postgres:15-alpine
    volumes:
      - postgres_data:/var/lib/postgresql/data/
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

volumes:
  postgres_data:

验证步骤 #

1. 重启容器：docker-compose down && docker-compose up -d --build
2. 打开浏览器访问前端地址，在开发者工具的Network面板中查看：
   • API请求的Origin是否与配置的origins匹配
   • 响应头中是否存在Access-Control-Allow-Origin且值与请求Origin一致
3. 若使用Nginx反向代理方案，确认请求路径为/api/xxx，无跨域相关报错

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