1. ⭐️ 服务器中转（代理服务器）

原理：同源策略只针对浏览器（客户端），服务器之间没有跨域限制。客户端先向同源的服务器发送请求，同源服务器再向不同源的服务器请求数据，最后同源服务器将获取到的数据返回给客户端。
示例：在 Node.js 中，可以创建一个中间层服务器，客户端向中间层服务器发送请求，中间层服务器再去请求目标服务器的数据，并将结果返回给客户端。

    const http = require('http');
    const url = require('url');

    // 创建代理服务器
    const proxyServer = http.createServer((req, res) => {
        // 解析目标服务器的 URL
        const targetUrl = '<http://target-domain.com>' + req.url;
        const options = {
            hostname: url.parse(targetUrl).hostname,
            port: 80,
            path: url.parse(targetUrl).path,
            method: req.method,
            headers: req.headers
        };

        // 向目标服务器发送请求
        const proxyReq = http.request(options, (proxyRes) => {
            // 将目标服务器的响应返回给客户端
            res.writeHead(proxyRes.statusCode, proxyRes.headers);
            proxyRes.pipe(res);
        });

        req.pipe(proxyReq);
    });

    proxyServer.listen(3000);

2. ⭐️ document.domain + iframe

原理：适用于主页面和 iframe 子页面的基础域名（一级域名）相同的情况。通过设置 document.domain 属性，将主页面和子页面的域名设置为相同的基础域名，这样就可以在主页面中通过 iframe.contentWindow 来获取子页面的 window 对象，进而操作子页面中的数据或调用子页面中的方法。

示例代码：

主页面（假设域名为 parent.example.com）：

<script>
	 document.domain = 'example.com';
	 var iframe = document.createElement('iframe');
	 iframe.src = '<http://sub.example.com/page.html>';
	 iframe.onload = function() {
	   // 可以访问子页面的一些数据或方法
	 };
	 document.body.appendChild(iframe);
</script>

子页面（假设域名为 sub.example.com）：

 <script>
   document.domain = 'example.com';
 </script>

3. ⭐️ window.name + iframe

原理：
- 利用 window.name 的特性，在一个窗口的生命周期内，其 name 属性值可以在不同页面之间共享且可读写。先让 iframe 中的页面程序保存 window.name，然后跳转到与父级窗口同源的另一个页面，父级页面就可以从当前的 iframe 拿到该页面的 window.name，从而获取到数据。

示例代码：

主页面：

 <script>
   var flag = false;
   var iframe = document.createElement('iframe');
   function getData() {
     if (flag) {
       var data = iframe.contentWindow.name;
       console.log(data);
     } else {
       flag = true;
       iframe.contentWindow.location = '<http://parent-domain.com/same-origin-page.html>';
     }
   }
   iframe.src = '<http://other-domain.com/data-page.html>';
   iframe.onload = getData;
   document.body.appendChild(iframe);
 </script>

iframe 页面：

 <script>
   window.name = 'Data from other domain';
 </script>

4. ⭐️ postMessage + iframe

原理：
- postMessage 是 HTML5 提供的一种在不同窗口或 iframe 之间进行通信的方法。主页面和 iframe 子页面可以通过 postMessage 方法发送和接收消息，实现跨域数据传递。
不常用原因：
- 伪造数据端漏洞
- xss 攻击
- 兼容性问题

页面 a 和页面 b 相互发消息的示例：

页面 a（父页面）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page A</title>
</head>
<body>
    <h1>Page A</h1>
    <button id="sendToB">Send Message to B</button>
    <iframe id="iframeB" src="<http://example.com/b.html>" width="600" height="400"></iframe>

    <script>
        const iframe = document.getElementById('iframeB');

        // 发送消息给 B 页
        document.getElementById('sendToB').addEventListener('click', function() {
            const message = { text: "Hello from A!" };
            iframe.contentWindow.postMessage(message, '<http://example.com>'); // 目标源应为 B 页的真实 URL
        });

        // 接收来自 B 页的消息
        window.addEventListener('message', function(event) {
            // 验证消息来源
            if (event.origin !== '<http://example.com>') return; // 目标源应为 B 页的真实 URL

            // 处理消息
            console.log('Message from B:', event.data);
        });
    </script>
</body>
</html>

页面 b（嵌入页面）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page B</title>
</head>
<body>
    <h1>Page B</h1>
    <button id="sendToA">Send Message to A</button>

    <script>
        // 发送消息给 A 页
        document.getElementById('sendToA').addEventListener('click', function() {
            const message = { text: "Hello from B!" };
            window.parent.postMessage(message, '<http://parent.example.com>'); // 目标源应为 A 页的真实 URL
        });

        // 接收来自 A 页的消息
        window.addEventListener('message', function(event) {
            // 验证消息来源
            if (event.origin !== '<http://parent.example.com>') return; // 目标源应为 A 页的真实 URL

            // 处理消息
            console.log('Message from A:', event.data);
        });
    </script>
</body>
</html>

说明

安全性：
- 确保在 postMessage 调用中指定了正确的目标源 URL。
- 在处理 message 事件时，通过检查 event.origin 来验证消息的来源。