使用js-cookie实现跨子域共享Cookie的最佳实践

跨域Cookie共享的挑战

在现代Web开发中，经常需要实现主域名与子域名之间的用户状态共享。例如，当用户在example.com登录后，希望其登录状态能自动同步到dashboard.example.com子域。这种场景下，Cookie的跨域共享就变得尤为重要。

js-cookie库的基本用法

js-cookie是一个轻量级的JavaScript库，用于简化Cookie操作。基本用法包括：

// 设置Cookie
Cookies.set('key', 'value');

// 获取Cookie
const value = Cookies.get('key');

// 删除Cookie
Cookies.remove('key');

实现跨子域共享的关键参数

要实现Cookie在子域间的共享，关键在于设置Cookie时的domain参数。正确的做法是：

// 在主域设置Cookie时指定顶级域
Cookies.set("authToken", "value", {
  expires: 7, // 7天有效期
  domain: ".example.com" // 注意前面的点号
});

几点重要说明：

1. 域名参数前必须加.，表示该Cookie可用于当前域及其所有子域
2. 只需在设置Cookie时指定domain，读取时无需指定
3. 删除Cookie时也需要指定相同的domain参数

常见问题解决方案

1. 本地开发有效但生产环境无效

   • 检查生产环境的域名配置是否正确
   • 确保SSL证书覆盖所有子域（HTTPS对Cookie安全很重要）

2. Cookie无法在子域读取

   • 确认domain参数格式正确（包含前导点）
   • 检查浏览器是否阻止第三方Cookie

3. 安全注意事项

   • 敏感Cookie应设置HttpOnly和Secure标志
   • 考虑使用SameSite属性防止CSRF攻击

完整实现示例

// 在主域example.com设置共享Cookie
function setSharedCookie() {
  Cookies.set("user-auth", "token123", {
    expires: 7,
    domain: ".example.com",
    secure: true,
    sameSite: 'lax'
  });
}

// 在子域dashboard.example.com读取Cookie
function getSharedCookie() {
  return Cookies.get("user-auth"); // 无需指定domain
}

通过以上方法，开发者可以轻松实现主域与子域之间的状态共享，为用户提供无缝的跨子域体验。