部署在Digital Ocean Docker中的FastAPI跨域（CORS）问题

核心问题分析 #

从错误提示No 'Access-Control-Allow-Origin' header is present on the requested resource来看，线上部署的FastAPI后端未正确返回CORS响应头，导致前端跨域请求被浏览器拦截。本地环境正常、线上异常，大概率是线上配置或网络环境的差异导致。

具体排查与解决步骤 #

1. 确认FastAPI的CORS中间件配置正确性 #

先检查CORS中间件是否正确挂载，参数配置是否完整：

• 确保代码中正确导入并添加中间件，示例配置如下：

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

app = FastAPI()

# 只保留和实际请求Origin完全匹配的项，去掉尾斜杠
origins = [
    "http://localhost:5173",
    "http://<你的服务器IP>:5173"  # 替换为实际的服务器公网IP
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],  # 允许所有请求方法
    allow_headers=["*"],  # 允许所有请求头
)

• 不要在origins中添加带尾斜杠的地址（比如http://<ip>:5173/），浏览器发送的Origin通常不带尾斜杠，会导致匹配失败。
• 通过浏览器开发者工具的Network面板，查看请求头中的Origin字段，确保其存在于origins列表中。

2. 验证后端服务的监听地址 #

确保FastAPI服务在容器内监听的是0.0.0.0而非127.0.0.1，否则容器外部（包括前端容器）无法正常访问服务：

• 检查uvicorn启动命令，示例：

uvicorn main:app --host 0.0.0.0 --port 8000

3. 检查Docker容器的网络与端口配置 #

• 确认docker-compose中后端的端口映射为8000:8000，前端为5173:5173，确保端口正确暴露。
• 测试前端容器内部能否正常访问后端：进入前端容器执行

curl -v http://<服务器IP>:8000/mdstats_player

查看响应头中是否包含Access-Control-Allow-Origin，如果没有说明后端CORS配置未生效；如果有，问题可能出在浏览器或前端请求配置。

4. 排查反向代理或防火墙干扰 #

• 如果服务器部署了Nginx等反向代理，检查代理配置是否修改了CORS响应头，必要时在Nginx中补充CORS配置，确保响应头被正确转发。
• 确认Digital Ocean的防火墙规则允许8000和5173端口的入站流量（你能访问两个端口的服务，这一步大概率没问题，但可以再确认）。

5. 临时测试通配符配置 #

可以临时将allow_origins=["*"]，如果跨域问题解决，说明之前的origins列表没有匹配到实际请求的Origin，需要根据浏览器的实际Origin调整列表。

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