Angular跨域名数据共享咨询：如何在两个域名间传递数据？

首先得明确：你遇到的问题核心是浏览器的同源策略限制——localStorage是严格绑定当前域名的，不同域名下的应用完全无法访问彼此的localStorage数据，这是浏览器的安全机制。

那cookies是否可行？得分两种情况来看：

一、如果两个域名属于同一主域名的子域名（比如a.example.com和b.example.com） #

这种情况下cookies是完全可行的！你只需要在设置cookie时指定domain属性为你的主域名（注意前面要加个点），这样所有属于该主域名的子域名都能读取这个cookie。

在Angular里，你可以用第三方库ngx-cookie-service来简化操作，示例代码如下：

import { CookieService } from 'ngx-cookie-service';

constructor(private cookieService: CookieService) {}

// 在domain1设置共享cookie
setSharedCookie() {
  // 参数依次是：key, value, 过期时间, 路径, 主域名, 是否https, SameSite属性
  this.cookieService.set('userData', JSON.stringify({name: 'test', id: 123}), undefined, '/', '.example.com', true, 'Strict');
}

之后在domain2的Angular应用里，直接调用this.cookieService.get('userData')就能拿到数据，记得解析JSON哦。

二、如果两个域名是完全独立的顶级域名（比如example.com和test.com） #

这种情况下普通cookies也受同源策略限制，无法直接共享。你得换用这些方案：

1. URL参数传递（适合非敏感数据） #

如果是从domain1跳转至domain2，可以把数据编码后放在URL的查询参数里。示例：

// 在domain1跳转到domain2时携带数据
const data = {userId: 456, token: 'xxx'};
const encodedData = encodeURIComponent(JSON.stringify(data));
window.location.href = `https://domain2.com/home?sharedData=${encodedData}`;

在domain2的应用里，通过ActivatedRoute获取参数：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    if (params['sharedData']) {
      const decodedData = JSON.parse(decodeURIComponent(params['sharedData']));
      // 处理拿到的数据
      console.log(decodedData);
    }
  });
}

⚠️ 注意：这种方法不适合传递敏感数据，因为参数会暴露在URL中，而且浏览器对URL长度有一定限制。

2. 后端中转（适合敏感数据） #

通过一个共同的后端服务来做数据中转：

• domain1把需要传递的数据发送到后端，后端生成一个唯一的临时token，将token返回给domain1
• domain1跳转到domain2时携带这个token
• domain2拿到token后，向后端请求对应的原始数据
• 后端验证token有效性后返回数据，之后可以销毁这个token

这种方法安全性更高，适合传递用户信息、敏感配置等数据。

3. PostMessage API（适合同窗口上下文的场景） #

如果domain1的页面是通过弹窗/iframe打开domain2的页面，那么可以用浏览器的postMessage API直接传递数据：

// domain1中打开domain2的弹窗并发送数据
const domain2Window = window.open('https://domain2.com');

// 等待窗口加载完成后发送（避免过早发送导致接收方未就绪）
setTimeout(() => {
  domain2Window.postMessage(
    { type: 'AUTH_DATA', content: {token: 'abc123'} },
    'https://domain2.com' // 指定接收方域名，防止数据泄露给恶意站点
  );
}, 1000);

在domain2的Angular应用里监听消息：

ngOnInit() {
  window.addEventListener('message', (event) => {
    // 严格验证消息来源，防止恶意攻击
    if (event.origin !== 'https://domain1.com') return;
    
    if (event.data.type === 'AUTH_DATA') {
      const receivedData = event.data.content;
      // 处理数据
    }
  });
}

这种方法需要两个页面处于同一浏览器窗口上下文，且必须严格验证来源域名，避免安全风险。

内容的提问来源于stack exchange，提问作者Guillaume Leprêtre