FastAPI+Next.js设置Cookie在Firefox无法存储的问题排查

核心原因分析 #

你遇到的问题确实和域名不统一直接相关：

• Chrome对本地环境的跨域Cookie规则相对宽松，允许localhost和127.0.0.1之间的Cookie互通；
• Firefox的规则更严格，会将localhost和127.0.0.1视为完全不同的域名。当你前端用localhost:3000请求后端127.0.0.1:8000时，后端设置的Cookie默认绑定127.0.0.1域名，Firefox会因为跨域域名不匹配而拒绝存储。

另外，Firefox默认可能阻止第三方Cookie，而跨域场景下这类Cookie会被判定为第三方，这也是影响因素之一。

解决方案 #

1. 统一前后端域名（最稳妥的开发环境方案）

将前端请求的域名和后端服务域名统一：

• 后端保持localhost:8000运行，前端请求URL改为：

  const backurl = `https://localhost:8000/authcookie?ip=${ip}`;
  

• 后端设置Cookie时显式指定domain为localhost：

  response.set_cookie(
      key="sessionID",
      value=str(id),
      expires=3600*2,
      samesite='None',
      secure=True,
      httponly=True,
      domain="localhost"
  )
  

2. 确认CORS配置的关键项

FastAPI的CORS必须开启allow_credentials=True，否则跨域请求无法携带Cookie：

from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://localhost:3000"],
    allow_credentials=True,  # 这个选项必须开启
    allow_methods=["*"],
    allow_headers=["*"],
)

3. 临时调整Firefox隐私设置（仅用于测试）

如果暂时不想改域名，可以在Firefox中：

• 输入about:preferences#privacy进入隐私设置
• 在「第三方Cookie」选项中选择「允许」，或者添加https://127.0.0.1:8000和https://localhost:3000为例外站点
• 注意：这只是临时测试方案，生产环境必须统一域名或遵循严格的跨域Cookie规则

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