基于Cookie的身份验证桌面端正常移动端浏览器失效如何解决

问题根因排查 #

以下是移动端Cookie失效的高频原因，按概率从高到低排列：

• Cookie未配置SameSite属性
  目前Chrome安卓、iOS Safari 13+ 等主流移动端浏览器对Cookie的SameSite默认策略为Lax，如果你的前后端属于跨站部署（域名/子域名不一致），未显式配置SameSite: None的Cookie会被浏览器自动拦截，无法写入也无法随请求发送，桌面端浏览器部分旧版本未强制执行该策略所以可以正常运行。
• 移动端访问的是HTTP站点
  你后端配置Cookie时开启了secure: true，该属性要求Cookie仅能在HTTPS协议下被存储和发送，若移动端用户通过HTTP地址访问站点，后端返回的Set-Cookie头会被浏览器直接忽略，不会写入存储。
• 前后端子域名不一致未配置domain属性
  你当前的Cookie配置未指定domain，默认只会匹配当前API接口的精确域名，如果前端页面和后端API部署在不同子域名下（比如前端是www.xxx.com、API是api.xxx.com），Cookie无法被前端页面所属域名读取，也不会随页面跳转后的请求发送。
• 移动端开启了隐私/无痕模式
  移动端浏览器的隐私模式会默认限制第三方Cookie写入，部分严格配置下甚至会限制第一方Cookie的存储时长。

解决方案 #

1. 首先修改后端Cookie配置，补充SameSite和可选的domain配置：

res.cookie('auth_token', token, {
    maxAge: tokenExpirationTime * 1000,
    httpOnly: true,
    secure: true,
    // 跨站部署填'None'，同站部署填'Lax'安全性更高
    sameSite: 'None',
    // 前后端不同子域名时补充，替换为你的根域名
    // domain: '.yourdomain.com'
});

2. 服务端配置全局HTTP跳转HTTPS的中间件，确保所有用户访问都走HTTPS协议，避免用户手动输入HTTP地址导致失效。
3. 验证时可通过移动端浏览器的开发者工具（安卓Chrome可连接电脑Chrome devtools，iOS Safari可开启Web检查器）查看Application -> Cookie面板，确认auth_token是否正常写入。

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