这个问题确实很常见——想要让Cookie在当前域名和所有子域名之间共享，但又不想硬编码域名，避免在不同环境部署时还要修改代码对吧？我来给你梳理几个靠谱的解决方案：

一、前端动态生成通用根域名（最常用的前端方案） #

当你直接设置document.cookie不指定domain时，浏览器会默认绑定当前精确域名（不带前缀点），这就导致子域名无法读取这个Cookie。我们可以通过window.location.hostname动态提取根域名，自动生成带前缀点的domain值：

function getValidCookieDomain() {
  const hostname = window.location.hostname;
  
  // 处理本地开发环境（localhost、IP地址）
  if (hostname === 'localhost' || hostname.match(/^\d+\.\d+\.\d+\.\d+$/)) {
    return ''; // 本地环境无需指定domain，浏览器会自动处理Cookie的共享
  }

  const domainParts = hostname.split('.');
  // 处理顶级域名（如example.com）或需要特殊处理的多级后缀（如co.uk）
  // 这里先做通用场景处理，若需兼容更多特殊后缀，可维护一个后缀列表
  if (domainParts.length <= 2) {
    return `.${hostname}`;
  } else {
    // 取最后两段作为根域名，比如 app.example.com → .example.com
    return `.${domainParts.slice(-2).join('.')}`;
  }
}

// 实际使用示例
const targetDomain = getValidCookieDomain();
const cookieOptions = [
  'key=value',
  'expires=Tue, 16 Apr 2019 11:31:56 GMT',
  'path=/',
  'secure',
  targetDomain ? `domain=${targetDomain}` : ''
].filter(Boolean).join('; ');

document.cookie = cookieOptions;

这段代码的关键点： #

• 自动识别本地开发环境，避免在localhost下设置domain导致的问题；
• 针对不同长度的域名动态生成根域名，确保当前域名和所有子域名都能访问该Cookie；
• 用filter(Boolean)过滤空值，避免本地环境下多出无效的; 符号。

二、借助后端动态设置（更可靠的方案） #

如果你的项目前后端配合紧密，更推荐让后端来处理Cookie的domain设置。后端可以通过请求的Host头准确获取当前服务的域名，然后在Set-Cookie响应头中动态生成domain=.example.com。

这种方式的优势是：后端能更精准地处理特殊域名后缀（比如example.co.uk、example.gov.cn这类多级顶级域名），不需要前端维护复杂的后缀判断逻辑，而且Cookie的安全性控制也更可控。

三、额外注意事项 #

• Secure属性：如果你的网站是HTTPS协议，一定要保留secure属性，确保Cookie只通过加密的HTTPS传输；
• SameSite属性：建议添加SameSite=Lax或SameSite=Strict，防止CSRF攻击，现在主流浏览器都要求Cookie明确设置SameSite属性；
• 特殊后缀兼容：如果你的域名属于co.uk、com.au这类特殊多级后缀，前端方案需要额外维护一个常见后缀列表，判断后调整域名截取的规则（比如取最后三段）。

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