Cookie 共享与区分规则

一、Cookie 共享规则

浏览器判断 Cookie 是否共享，仅依据 3 个核心维度，端口号不参与判断（这是最易混淆的点）。

1.1 共享条件（满足以下全部）

• ✅ 域名一致：如 localhost、www.baidu.com，需完全匹配（localhost 与 127.0.0.1 视为不同域名）；
• ✅ 协议一致：http 与 https 完全隔离（即使同域名同端口，协议不同也不共享）；
• ✅ 子域名匹配：通过 Domain 属性配置（如 Domain=baidu.com 可让 www.baidu.com、tieba.baidu.com 共享）。

1.2 典型示例

场景	是否共享	原因
http://localhost:8080 ↔ http://localhost:3000	✅ 是	同域名、同协议，端口不影响
http://localhost:8080 ↔ https://localhost:8080	❌ 否	协议不同，独立 Cookie 容器
http://www.baidu.com ↔ http://tieba.baidu.com	❌ 否（默认）	子域名不同，需配置 Domain=baidu.com 才共享
http://localhost:8080 ↔ http://127.0.0.1:8080	❌ 否	域名不同（浏览器视为两个独立域名）

二、Cookie 区分规则

Cookie 以 键值对（Key=Value） 为核心存储单元，即使共享 Cookie 池，也能通过以下机制精准区分，避免混淆。

2.1 核心区分维度（优先级从高到低）

1. 键名区分（最根本） 不同键名的 Cookie 完全独立，例如 token=abc123 与 userId=1001，修改/删除其中一个不会影响另一个。

2. Path 属性过滤相同键名可通过 Path 限定生效范围，例如：

   1. Set-Cookie: name=张三; Path=/user → 仅在 /user 路径下生效；
   2. Set-Cookie: name=李四; Path=/admin → 仅在 /admin 路径下生效；
   3.   即使同域名同端口，不同 Path 的同名 Cookie 也不会冲突。

3. 协议兜底隔离http 与 https 拥有独立的 Cookie 容器，例如 http://localhost 写入的 theme=dark，在 https://localhost 中完全不可见。

2.2 前端解析 Cookie 示例

浏览器通过 document.cookie 返回拼接字符串（格式：key1=val1; key2=val2），可通过以下代码精准获取指定键值：

/**
 * 解析 Cookie，根据键名获取对应值
 * @param {string} key - Cookie 键名
 * @returns {string} Cookie 值（未找到返回空字符串）
 */
function getCookie(key) {
  return document.cookie
    .split('; ') // 分割多个 Cookie（注意分号后有空格）
    .find(item => item.startsWith(`${key}=`)) // 匹配目标键名
    ?.split('=')[1] || ''; // 提取值，无匹配则返回空
}

// 使用示例
const token = getCookie('token'); // 获取登录态 Token
const theme = getCookie('theme'); // 获取主题配置

三、补充注意事项

1. 值覆盖规则同域名、同 Path、同键名的 Cookie，后写入的值会覆盖旧值（常用于更新登录态，如新 Token 替换旧 Token）。

2. 手动隔离方案若需实现「同域名不同端口的 Cookie 隔离」，可通过以下方式：

   1. 后端设置 Set-Cookie: ...; SameSite=Strict; Partitioned（浏览器新版本支持）；
   2. 前端通过 iframe 沙箱（sandbox="allow-scripts"）隔离 Cookie 环境。

3. 特殊场景避坑

   1. 避免「同域名+同 Path+同键名」的多 Cookie 存储（浏览器虽支持，但后端解析易出错）；
   2. 中文/特殊字符需编码（前端用 encodeURIComponent，后端对应解码），否则可能导致 Cookie 失效。