本文介绍在前后端分离架构中，如何通过配置多域名 cookie 解决本地开发（localhost）与生产/测试域名（如 uat.example.com）共存时的认证失效问题，确保前端调试不受影响。
本文介绍在前后端分离架构中，如何通过配置多域名 cookie 解决本地开发（localhost）与生产/测试域名（如 uat.example.com）共存时的认证失效问题，确保前端调试不受影响。
在现代 Web 应用中，后端常通过 Set-Cookie 响应头为特定域名（如 uat.example.com）写入认证凭证（如一次性 code），前端在后续请求中携带该 Cookie 完成身份校验。但当前端团队在 localhost:4200 本地开发，并通过代理（如 Angular CLI 的 proxy.conf.json 或 Vite 的 server.proxy）将 /context 请求转发至 https://uat.example.com/context 时，浏览器会因 Cookie 的 Domain 属性限制拒绝发送该 Cookie——因为 localhost 不匹配 Domain=uat.example.com，且 Domain=localhost 也不被允许（浏览器要求 localhost 的 Domain 属性必须省略或显式设为空）。
✅ 正确解决方案：按运行环境动态下发双 Cookie
后端不应尝试“一 cookie 适配多域”，而应在响应中根据当前请求来源（Host 头或部署环境标识）条件性设置两个独立 Cookie：
# 当请求来自 uat.example.com（生产/测试环境） Set-Cookie: auth_code=abc123; Domain=uat.example.com; Path=/; HttpOnly; Secure; SameSite=Strict # 当请求来自 localhost:4200（本地开发环境） Set-Cookie: auth_code=abc123; Domain=localhost; Path=/; HttpOnly; SameSite=Lax
⚠️ 注意事项：
- Domain=localhost 是合法且必需的（Chrome/Firefox 支持），但不可带端口（如 localhost:4200 ❌）；
- SameSite=Lax 在本地开发中更兼容（避免跨站请求被拦截），生产环境建议 Strict 或 None + Secure；
- Secure 属性仅对 HTTPS 生效，本地开发必须禁用（否则 localhost 下 Cookie 不会被发送）；
- 后端可通过 Host 请求头、自定义 Header（如 X-Env: local）或 CI/CD 环境变量（如 DEPLOY_ENV=local）判断上下文。
? 实现示例（Node.js/Express）：
app.post('/login', (req, res) => {
const authCode = generateAuthCode();
const isLocal = req.headers.host?.startsWith('localhost') ||
process.env.NODE_ENV === 'development';
// 设置主 Cookie（生产环境）
res.cookie('auth_code', authCode, {
domain: isLocal ? 'localhost' : 'uat.example.com',
path: '/',
httpOnly: true,
secure: !isLocal, // 仅 HTTPS 环境启用
sameSite: isLocal ? 'lax' : 'strict',
maxAge: 30 * 60 * 1000 // 30 分钟
});
res.json({ success: true });
});? 总结：
- ❌ 不要试图用单个 Cookie 覆盖 localhost 和正式域名；
- ✅ 通过环境感知逻辑，在响应中动态写入匹配当前 Host 的 Cookie；
- ✅ 利用 CI/CD 变量或请求头自动识别环境，避免硬编码；
- ✅ 前端无需修改代理配置，只需确保本地服务运行在 localhost:4200（非自定义域名），即可正常读取并发送对应 Cookie。
此方案兼顾安全性与开发效率，是微服务+单页应用架构下的推荐实践。
