同源政策
您无法<iframe>使用JavaScript 访问其他来源的内容，如果可以的话，这将是一个巨大的安全漏洞。对于同源策略， 浏览器会阻止脚本尝试访问源不同的框架。
如果未保留地址的以下至少其中之一，则认为起源是不同的：
<protocol>://<hostname>:<port>/...
如果要访问框架，协议，主机名和端口必须与您的域相同。
注意：Internet Explorer并不严格遵循此规则，有关详细信息，请参见此处。
例子
尝试从中访问以下URL会发生以下情况 http://www.example.com/home/index.html
URL RESULT
http://www.example.com/home/other.html -> Success
http://www.example.com/dir/inner/another.php -> Success
http://www.example.com:80 -> Success (default port for HTTP)
http://www.example.com:2251 -> Failure: different port
http://data.example.com/dir/other.html -> Failure: different hostname
https://www.example.com/home/index.html:80 -> Failure: different protocol
ftp://www.example.com:21 -> Failure: different protocol & port
https://google.com/search?q=james+bond -> Failure: different protocol, port & hostname
解决方法
即使同源策略阻止脚本访问源不同的站点的内容，但是如果您同时拥有两个页面，则可以使用window.postMessage及其相对message事件在两个页面之间发送消息来解决此问题，如下所示：
在您的主页中：
let frame = document.getElementById('your-frame-id');
frame.contentWindow.postMessage(/*any variable or object here*/, 'http://your-second-site.com');
的第二个自变量postMessage()可以是'*'指示对目的地的起点没有任何偏好。在可能的情况下，应始终提供目标来源，以避免泄露您发送到任何其他站点的数据。
在您的<iframe>（包含在主页中）：
window.addEventListener('message', event => {
// IMPORTANT: check the origin of the data!
if (event.origin.startsWith('http://your-first-site.com')) {
// The data was sent from your site.
// Data sent with postMessage is stored in event.data:
console.log(event.data);
} else {
// The data was NOT sent from your site!
// Be careful! Do not use it. This else branch is
// here just for clarity, you usually shouldn't need it.
return;
}
});
此方法可以在两个方向上应用，也可以在主页上创建侦听器，并从框架接收响应。相同的逻辑也可以在弹出窗口中实现，并且基本上也可以在主页上（例如使用window.open()）生成任何新窗口，而没有任何区别。
在禁用同源策略您的浏览器
关于这个主题已经有了一些很好的答案（我刚刚找到了它们），因此，对于可能的浏览器，我将链接相对答案。但是，请记住，禁用同源策略只会影响您的浏览器。此外，运行禁用了同源安全设置的浏览器会授予任何网站访问跨域资源的权限，因此这是非常不安全的，如果您不确切知道自己在做什么（例如，出于开发目的），则永远不要这样做。
Access-Control-Allow-Origin不适用于Iframe，只有XHR时，字体，WebGL和canvas.drawImage。我相信postMessage是唯一的选择。