Firefox未存储Express.js服务端auth认证Cookie如何修复

核心原因 #

现代Firefox默认启用严格的跨域Cookie校验规则，跨域场景下如果Cookie的SameSite、Secure属性配置不符合规范，就会出现「响应头里能看到Set-Cookie，但Cookie不会被持久化存储、后续请求也不会自动携带」的问题，和你当前遇到的现象完全匹配。

分步修复 #

1. 修正Express服务端Cookie属性配置 #

认证Cookie的配置必须和部署场景匹配：

• 前后端跨域部署（比如前端部署在Vercel、后端部署在其他域名/服务商）：必须设置sameSite: 'none'，同时强制开启secure: true——浏览器规范要求SameSite=None的Cookie只能在HTTPS环境下生效，你的Vercel站点默认支持HTTPS，符合要求。
• 前后端同域/同根域部署：设置sameSite: 'lax'即可，生产环境同样需要开启secure: true。
• 非必要不要手动设置domain字段，默认留空让浏览器自动匹配请求源即可，手动填错域名会直接导致Cookie被拦截。
• 配置明确的maxAge有效期，避免Cookie被识别为临时会话Cookie，关闭标签页就自动清除。

参考配置代码：

// 原生res.cookie 写法
res.cookie('auth_token', tokenValue, {
  httpOnly: true, // 认证Cookie建议开启，防止XSS窃取
  secure: process.env.NODE_ENV === 'production',
  sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax',
  maxAge: 7 * 24 * 60 * 60 * 1000, // 示例为7天有效期，按业务需求调整
  path: '/'
})

// express-session 插件配置写法
app.use(session({
  secret: '替换为你自己的加密密钥',
  resave: false,
  saveUninitialized: false,
  cookie: {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax',
    maxAge: 7 * 24 * 60 * 60 * 1000
  }
}))

2. 修正跨域（CORS）配置 #

跨域场景下必须同时配置服务端和前端的凭证携带规则，否则Set-Cookie头会被浏览器直接忽略：

• 服务端cors中间件配置：

const cors = require('cors')
app.use(cors({
  origin: 'https://cinehubb.vercel.app', // 替换为你的前端实际访问地址，生产环境禁止设为*
  credentials: true // 允许跨域请求携带Cookie
}))

• 前端请求配置：
  用axios发请求时加withCredentials: true参数，用原生fetch发请求时加credentials: 'include'参数，否则跨域请求不会携带、也不会接收存储Cookie。

// axios 示例
axios.post('/api/login', params, { withCredentials: true })

// fetch 示例
fetch('/api/login', {
  method: 'POST',
  credentials: 'include',
  body: JSON.stringify(params)
})

3. 浏览器侧校验排查 #

• 打开Firefox开发者工具的「存储」-「Cookie」面板，找到对应域名下的Cookie条目，条目旁的警告图标会直接标注Cookie被拦截的具体原因（比如SameSite缺失、Secure属性未开启、域名不匹配），可以直接按提示调整配置。
• 如果Firefox开启了「严格」隐私追踪保护模式，会默认拦截不符合规范的第三方跨域Cookie，可以临时切换到「标准」保护模式测试，切换后如果Cookie能正常存储，说明还是服务端Cookie属性配置不达标。

4. 本地开发注意事项 #

本地HTTP开发环境（比如前端跑localhost:3000、后端跑localhost:5000）不要设置sameSite: 'none'和secure: true，这两个配置在非HTTPS环境下会直接导致Cookie存储失败，本地开发用sameSite: 'lax'即可正常运行。

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