本地开发时，Cookie 同意状态无法跨 localhost 及其子域名（如 requester.localhost）共享，导致通知反复弹出；根本原因是 domain 属性设置错误——应使用 "localhost" 而非 ".localhost"。
本地开发时，cookie 同意状态无法跨 localhost 及其子域名（如 requester.localhost）共享，导致通知反复弹出；根本原因是 `domain` 属性设置错误——应使用 `"localhost"` 而非 `".localhost"`。
在基于 Vue 和 vue-cookies 的前端项目中，若希望用户在 localhost 或任意子域名（如 requester.localhost、api.localhost）上仅需接受一次 Cookie 提示，就必须确保该 Cookie 被正确设置为跨子域名共享。然而，关键陷阱在于：.localhost 是非法的 Cookie 域名。
根据 RFC 6265，浏览器对 Domain 属性有严格校验规则：
- 若 Domain 属性以点开头（如 ".example.com"），表示该 Cookie 可被 example.com 及其所有子域名（a.example.com、b.example.com）访问；
- 但 ".localhost" 不被任何主流浏览器支持——因为 localhost 是一个特殊主机名（不属于公共后缀列表），不允许通配符前缀。浏览器会直接忽略带前导点的 Domain=".localhost"，导致 Cookie 默认仅绑定到当前完整主机名（如 requester.localhost），无法在 localhost 或其他子域名下读取。
✅ 正确做法是将 domain 显式设为 "localhost"（不带点）：
acceptCookies() {
this.$cookies.set("cookie_agreement", "1", {
path: "/",
domain: "localhost", // ✅ 关键修正：移除前导点
secure: false, // 开发环境可设为 false；生产 HTTPS 环境建议设为 true
sameSite: "Lax" // 推荐设置，兼顾安全与功能性
});
this.snackbar = false;
}
⚠️ 注意事项：
- domain: "localhost" 会使 Cookie 在 localhost、requester.localhost、admin.localhost 等所有 *.localhost 子域名下均可读写；
- 确保 path: "/" 已设置，否则 Cookie 可能受限于路径范围；
- 若部署到真实域名（如 example.com），才应使用 domain: ".example.com"（带点）以支持子域名共享；
- 浏览器 DevTools → Application → Cookies 中可验证 Cookie 的 Domain 字段是否为 localhost（而非空或 .localhost）；
- 清除旧 Cookie 后再测试：因错误设置的 Cookie 已存在，需手动删除或调用 this.$cookies.remove("cookie_agreement") 重置。
总结：本地开发跨子域名共享 Cookie 的核心原则是——对 localhost 使用无点域名，对公网域名使用带点通配域名。这一细微差异，正是解决重复提示问题的关键所在。
