如何通过JavaScript从父域名访问子域名设置的Cookie？

这确实是浏览器Cookie同源策略的正常表现——Cookie的domain属性直接决定了它能被哪些域名读取。当你设置domain=small.example.org时，这个Cookie就被限定只能在small.example.org及其子域名（如果存在的话）范围内访问，父域名example.org自然没有权限获取它。下面给你几个可行的解决思路：

1. 修改Cookie的domain属性为父域名（推荐） #

这是最直接且符合Cookie设计逻辑的方案。在子域名设置Cookie时，把domain指定为父域名example.org，同时加上path=/确保整个域名下的页面都能访问到这个Cookie：

document.cookie = "name=Mike; domain=example.org; path=/";

设置完成后，small.example.org和example.org以及其他子域名（比如test.example.org）都能正常读取这个Cookie。

2. 通过子域名代理接口跨域获取（无法修改Cookie设置时用） #

如果因为某些原因不能修改子域名的Cookie配置，可以在small.example.org上搭建一个简单的接口，专门用来返回Cookie的值，然后父域名通过CORS跨域请求去获取。

• 第一步：在子域名的后端（比如Node.js、PHP等）设置接口，比如/api/get-cookie，同时配置CORS响应头允许父域名访问：
  以Node.js Express为例：

  app.get('/api/get-cookie', (req, res) => {
    res.setHeader('Access-Control-Allow-Origin', 'https://example.org');
    res.send(req.cookies.name);
  });
  

• 第二步：父域名页面发起请求获取Cookie值：

  fetch('https://small.example.org/api/get-cookie')
    .then(response => response.text())
    .then(cookieValue => {
      console.log('从子域名拿到的Cookie值:', cookieValue);
    })
    .catch(err => console.error('请求失败:', err));
  

  注意：这种方式要做好安全校验，比如严格限制Access-Control-Allow-Origin的取值，避免被恶意域名滥用。

3. 使用postMessage进行跨域通信（页面嵌套/同时打开场景） #

如果父域名页面和子域名页面存在嵌套关系（比如父页面嵌入了子域名的iframe），或者用户同时打开了两个域名的页面，可以通过postMessage让子域名主动把Cookie发送给父域名。

• 父域名页面监听消息：

  window.addEventListener('message', (event) => {
    // 验证消息来源，防止恶意请求
    if (event.origin !== 'https://small.example.org') return;
    console.log('收到子域名发送的Cookie:', event.data);
  });
  

• 子域名页面发送Cookie：

  // 如果是iframe嵌套，用window.parent；如果是独立窗口，需要获取父窗口的引用
  window.parent.postMessage(document.cookie, 'https://example.org');
  

  这种方式的局限性较大，仅适用于两个页面有交互场景的情况。

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