为何使用Fetch调用FastAPI接口无法保存HttpOnly Cookie？

问题排查与修复步骤 #

1. 移除Fetch请求中的Access-Control-Allow-Origin请求头 #

你在客户端Fetch代码里手动添加了Access-Control-Allow-Origin头，这是服务器响应头，不属于客户端应该发送的请求头。浏览器会对这种不符合规范的请求进行拦截，直接导致Cookie无法正常设置。

修改后的Fetch代码：

// GET请求
fetch('https://api.mydomain.com/api/v1/forms/cookie?category=all&count=2', {
    method: 'GET',
    credentials: 'include'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.error(err));

// POST请求
const payload = {
    "email": "test@test.com",
    "password": "password",
    "csrf": "csrf"
}
const jsonData = JSON.stringify(payload);

fetch('https://api.mydomain.com/api/v1/forms/auth', {
    method: 'POST',
    credentials: 'include',
    headers: {
        "Content-Type": "application/json"
    },
    body: jsonData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.error(err));

2. 验证Cookie参数的兼容性 #

你的Cookie设置中SameSite=None必须和Secure=True配合使用，这一点你已经配置，但需要额外确认：

• 服务必须运行在HTTPS环境下（本地HTTP测试时，需将secure改为False，生产环境必须设为True）
• 浏览器版本支持SameSite=None（现代主流浏览器均支持，老旧浏览器可针对性兼容）

3. 检查FastAPI的CORS响应头 #

虽然你配置了CORSMiddleware，但要确保服务器返回的响应头包含以下两个字段：

• Access-Control-Allow-Origin：精确匹配请求源https://portal.mydomain.com（不能用通配符*，因为开启了allow_credentials=True）
• Access-Control-Allow-Credentials: true

可通过浏览器开发者工具的Network标签，查看请求的响应头是否符合要求。

4. 确认Cookie的查看位置 #

由于你设置了httponly=True，该Cookie无法通过document.cookie读取，但可以在浏览器开发者工具的Application标签 → Cookies → 对应域名下找到它。如果此处也看不到，说明Cookie未被成功设置，需回到前面的步骤重新排查。

额外优化：配置Cookie的共享域名 #

如果portal.mydomain.com和api.mydomain.com属于同一主域，可在设置Cookie时添加domain参数，让子域名间共享Cookie：

@router.get("/cookie")
def set_cookie(response: Response):
    response.set_cookie(
        key="testCookie",
        value="testCookieValue",
        httponly=True,
        secure=True,
        samesite="none",
        domain=".mydomain.com"  # 让所有mydomain.com的子域名共享该Cookie
    )
    return {"message": "Cookie has been set2"}

内容的提问来源于stack exchange，提问作者Johnny John Boy