未设置Cookie时请求/nonce出现CORS错误的原因与解决方法

错误原因 #

当请求设置了withCredentials: true时，CORS规范明确要求服务器返回的Access-Control-Allow-Origin响应头不能是通配符*，必须是具体的请求源域名。你的后端配置了allow_origins=["*"]同时开启allow_credentials=True，这直接违反了该规范，导致浏览器拦截首次请求（即使此时还没有Cookie，只要前端声明了要携带凭证，浏览器就会按带凭证的请求规则校验）。

第二次请求看似正常，大概率是浏览器缓存或后续请求中某些隐性因素暂时绕过了校验，但这不是合规的解决方式。

解决方案 #

1. 替换通配符为具体允许的源 #

将后端的allow_origins配置从["*"]改为前端实际运行的域名，比如本地开发和生产环境的地址：

app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000", "https://your-production-app.com"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

2. 动态匹配多个源（可选） #

如果需要支持多个动态域名，可以使用allow_origin_regex来设置正则匹配规则，比如匹配所有子域名：

app.add_middleware(
    CORSMiddleware,
    allow_origin_regex=r"https?://.*\.yourdomain\.com",
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

3. 适配本地开发的Cookie设置 #

你的Cookie配置了secure=True，这要求请求必须通过HTTPS协议。如果本地开发使用HTTP，浏览器会拒绝保存这个Cookie，可能引发后续问题。建议根据环境动态调整secure参数：

response.set_cookie(
    key=COOKIE_SESSION_ID_KEY,
    value=session_id,
    samesite='none',
    secure=not DEBUG,  # DEBUG为True时（本地开发）关闭secure
    httponly=True  # 建议添加httponly增强安全性
)

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