FastAPI无法向React前端返回Cookie问题求助

1. 给axios请求添加withCredentials配置 #

axios默认不会自动处理跨域请求的Cookie，必须显式开启该配置：

await axios.post(login_url, formdata, {
  withCredentials: true
})

2. 配置FastAPI的CORS中间件，允许凭证传递 #

如果React和FastAPI处于不同域名/端口，必须在FastAPI中配置跨域支持，且开启允许凭证：

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

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],  # 替换为你的React前端实际域名，不能用*
    allow_credentials=True,  # 必须设为True，否则Cookie无法跨域传递
    allow_methods=["*"],
    allow_headers=["*"],
)

注意：allow_origins不能使用通配符*，必须指定具体的前端域名，否则浏览器会因安全策略拦截Cookie。

3. 优化FastAPI的Cookie设置参数 #

给set_cookie添加适配跨域场景的参数：

response.set_cookie(
    key="fakesession",
    value="fake-cookie-session-value",
    httponly=False,  # 若需要前端JS读取Cookie则设为False，否则设为True更安全
    secure=False,  # 生产环境使用HTTPS时设为True
    samesite="lax",  # 跨域场景可设为"none"，但需配合secure=True
    max_age=3600  # 设置Cookie过期时间，可选
)

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