为何同一Key的Cookie被设置两次且值不同？

出现两个同名token Cookie且其中一个无法清除的情况，核心原因是两个Cookie的属性（域/路径）不匹配，被浏览器视为独立的Cookie，以下是具体原因和解决方法：

可能的原因 #

• Domain属性不一致：一个Cookie指定了父域（比如domain=.example.com），另一个未指定Domain（默认绑定当前子域，比如sub.example.com）。浏览器会把不同Domain的同名Cookie视为独立条目，子域的JS如果不指定父域参数，无法清除父域的Cookie。
• Path属性不匹配：你设置的Cookie路径是/，但另一个Cookie的路径可能是更具体的（比如/api）。不同Path的同名Cookie会被分开存储，清除时如果没指定对应Path，就无法删除目标Cookie。
• 服务器端额外设置了Cookie：你只在前端用JS设置了Cookie，但登录接口的响应头里可能包含Set-Cookie字段，服务器也下发了一个token Cookie。如果服务器设置的Cookie属性（Domain/Path）和前端不一致，就会出现两个并存的情况。
• 浏览器进程残留：极端情况下，Chrome后台进程未完全关闭，导致Cookie缓存残留。但你已经尝试强制清除，这个可能性较低。

排查与解决步骤 #

1. 查看Cookie属性差异：打开Chrome开发者工具 → Application → Cookies，找到两个token Cookie，对比它们的Domain、Path、HttpOnly等属性，确认差异点。
2. 精准清除目标Cookie：根据查到的属性，用指定参数清除顽固Cookie，比如：
   • 如果目标Cookie的Domain是.example.com、Path是/：

     document.cookie = "token=; path=/; domain=.example.com; expires=Thu, 01 Jan 1970 00:00:00 GMT";
     

   • 如果目标Cookie的Path是/api：

     document.cookie = "token=; path=/api; expires=Thu, 01 Jan 1970 00:00:00 GMT";
     

3. 检查服务器响应头：在Network面板查看登录请求的响应头，确认是否存在Set-Cookie: token=xxx字段。如果是服务器下发的Cookie，调整服务器或前端的Cookie参数，保持Domain、Path一致，避免重复设置。
4. 彻底重启浏览器：关闭Chrome所有窗口（包括后台进程），重新打开后再验证。

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