共计 4316 个字符，预计需要花费 11 分钟才能阅读完成。
同源政策：协议、域名、端口均相同。
非同源限制：
cookie、localStorage、indexDB 无法读取。
DOM 无法获取。
AJAX 请求无法发送。
解决方式：
一、JSONP
原理：通过动态添加一个 <script> 元素，向服务器请求 JSON 数据。服务器接收请求返回到指定具名回调函数。
eg:
function addScript(src) {
var script = document.createElement(‘script’);
script.setAttribute(“type”, “text/javscript”);
script.src = src;
document.body.appendChild(script);
}
window.onload = function() {
addScript(“https://segmentfault.com/data?callback=getData”);
}
function getData(data) {
console.log(data)
}
注意：1、查询的 Url 中 callback 需要指定回调函数的名字。2、<script> 在浏览器作为代码运行，定义的 getData 函数会被立即调用。3、返回的 JSON 参数作为 javascript 对象，不是字符串，不需要进行 JSON 转换。4、jquery 库的 $.getJSON() 也可以实现。
$.getJSON(“https://segmentfault.com/data?callback=?”, function(data) {
console.log(data)
})
缺陷：是 GET 方式获取，不支持 POST。
二、window.postMessage
window.postMessage 无论是否同源都允许跨窗口通信。postMessage 参数一是传递内容，参数二是协议 + 域名 + 端口或者（* 表示不限制域名）
页面一：”https://www.segmentfault.com/page1.html” // 传递页面
<script>
window.onload = function () {
if (typeof window.postMessage === undefined) {
alert(“ 浏览器不支持 postMessage！”);
} else {
window.open.postMessage({data: “Hello World”}, “https://www.example.com/page2.html”);
}
}
</script>
页面二：”https://www.example.com/page2.html” // 接收页面
<script>
window.addEventListener(‘message’, function(e) {
console.log(e.data);
},false);
</script>
事件接收 window.addEventListener(‘message’, function(){}); 中的 message 事件对象 event 有三个属性：1、event.source：发送消息的窗口 2、event.origin: 消息发向的网址 3、event.data: 消息内容
<script>
// 引用父窗口发送信息给下一个窗口
window.addEventListener(‘message’, receiveMessage);
function receiveMessage(event) {
event.source.postMessage(‘Nice to see you!’, ‘*’);
}
</script>
<script>
// 过滤不是发给本窗口的信息
window.addEventListener(‘message’, receiveMessage);
function receiveMessage(event) {
if (event.origin !== ‘http://www.segmentfault.com/page1.html’) return;
if (event.data === ‘Hello World’) {
event.source.postMessage(‘Hello’, event.origin);
} else {
console.log(event.data);
}
}
</script>
三、iframe
iframe 载入页面和 src 里面的目标域是同一个域，是能够发起 ajax 请求（父子窗口）。// 前提是同源，不同源就不可以发起 ajax 请求。
不同窗口同源之间是可以获取 window 对象，但是不能获取 window 对象的属性和方法。// 不同源会报错
1、document.domain + iframe（同源可用 — 跨子域）
document.domain 属性：一级域名相同，二级域名不同可以实现 window 对象获取。
页面一：”https://segmentfault.com/page1.html”
<script>
window.onload = function() {
document.domain = “https://segmentfault.com/”; // 设置 domain
window.getData = function() {
//ajax 请求
}
}
</script>
页面二：”https://segmentfault.com/page2.html”
<iframe id=”iframe” src=”https://segmentfault.com/page1.html” onload=”test()”></iframe>
<script>
// 动态创建 iframe 最佳，获取完数据销毁。
//document.domain 设置成自身或更高一级的父域，主域必须相同。
document.domain = “https://segmentfault.com/” // 设置 domain
function test() {
var win = document.getElementById(“iframe”).contentWindow;
win.getData(“https://segmentfault.com/json_domain.php”, function() {})
}
</script>
缺陷：主域名得一致。
2、window.name + iframe（非同源可用）
window.name 属性：在一个窗口的生命周期内，无论是否同源，同一个窗口的载入页面 window.name 属性是共享的，每个页面都可以操作。
页面一：”https://segmentfault.com/page1.html”
<script>
window.name = “this is data!”
</script>
页面二：”https://segmentfault.com/page2.html”
<iframe id=”iframe” src=”https://segmentfault.com/page1.html” onload=”test()”></iframe>
<script>
// 动态创建 iframe 最佳，获取完数据销毁。
// 获取 window.name
function test() {
var winName = document.getElementById(“iframe”).contentWindow.name;
winName.src = “https://segmentfault.com/data.html”; // 最后需要将 iframe 的 src 设置成当前域的一个页面地址
}
</script>
缺陷：兼容性不好
3、location.hash + iframe（非同源可用）
片段标识符：片段标识符是指 url# 号后面的部分。只是改变片段标识符页面不刷新。
页面一：”https://www.segmentfault.com/page1.html”
<script>
function startRequest(){
var ifr = document.createElement(‘iframe’);
ifr.style.display = ‘none’;
ifr.src = ‘https://www.example.com/page2.html#messgae’;
document.body.appendChild(ifr);
}
function checkHash() {
var data = location.hash ? location.hash.substring(1) : ”;
}
setInterval(checkHash, 2000);
</script>
页面二：”https://www.example.com/page2.html#messgae”
<script>
function callBack(){
try {
parent.location.hash = ‘somedata’;
} catch (e) {
// ie、chrome 的安全机制无法修改 parent.location.hash，
// 所以要利用一个中间的 example 域下的代理 iframe
var ifrproxy = document.createElement(‘iframe’);
ifrproxy.style.display = ‘none’;
ifrproxy.src = ‘https:/www.segmentfault.com/page3html#somedata’; // 注意该文件在 ”segmentfault.com” 域下
document.body.appendChild(ifrproxy);
}
}
</script>
页面三：”ttps:/www.segmentfault.com/page3html#somedata”
<script>
// 因为 parent.parent 和自身属于同一个域，所以可以改变其 location.hash 的值
parent.parent.location.hash = self.location.hash.substring(1);
</script>
缺点：数据暴露在 url，长度也有限制。
四、WebSocket
WebSocket：浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。
设置 WebSocket 请求头信息，服务器支持就可以进行。
Origin: http://example.com // 根据域名是否在白名单内来判断是否可以通信
缺点：实现成本高。
五、CORS
cors 是跨域资源分享。现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨源通信。
缺点：服务器配置，占用主域带宽。
