Web应用多路径下JS Cookie重复创建问题及解决方案咨询

你遇到的这个问题其实很常见——当未明确指定Cookie的生效路径时，浏览器会默认把当前页面的路径设为Cookie的作用域，再加上之前可能残留了旧的Cookie，就会导致多个Cookie共存干扰后端验证。下面是具体的解决步骤：

1. 先清理路径不正确的旧Cookie #

首先要删掉在/abc路径下生成的无效Cookie，避免它和根路径的Cookie冲突。可以通过设置过期时间为过去的日期来删除：

// 删除/abc路径下的token Cookie
document.cookie = "token=; path=/abc; expires=Thu, 01 Jan 1970 00:00:00 UTC;";

2. 正确设置全局根路径的Cookie #

设置Cookie时必须明确指定path=/，确保这个Cookie在整个域名的所有路径下都生效。如果你的网站是HTTPS协议，建议加上secure属性（仅在HTTPS环境下传输Cookie），同时添加SameSite属性提升安全性：

if (idToken) {
  // 设置根路径Cookie，覆盖所有子路由
  document.cookie = `token=${idToken}; path=/; SameSite=Lax;`;
  // 如果是HTTPS网站，加上secure属性更安全
  // document.cookie = `token=${idToken}; path=/; SameSite=Lax; secure;`;
  window.location.assign('/dashboard');
}

3. 验证Cookie是否正确配置 #

打开浏览器开发者工具（F12），切换到Application标签，找到Cookies下的你的域名，确认只有一条tokenCookie，且它的Path属性显示为/。

为什么之前设置path=/没生效？ #

大概率是因为旧的/abc路径下的Cookie还存在，浏览器访问/abc/xyz时会同时发送两个Cookie：根路径的/和子路径的/abc。后端获取Cookie时，通常会优先匹配路径更精确的那个（也就是/abc下的旧Cookie），而这个旧Cookie可能已经失效或者不是最新的JWT，自然会导致验证失败。

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