跨域就是实现不同域的接口进行数据交互。
一、jsonp
html中script标签可以引入其他域下的js，比如引入线上的jquery库。利用这个特性，可实现跨域访问接口，不过需要后端支持。
web页面中，通过script标签获取js代码可以进行跨域，我们可以动态的创建script标签，设置src属性指向我们请求资源的url地址，然后放到head标签中。这样就可以把不同域的数据加载到本域名下，不过需要后端支持jsonp，也就是通过前端的url中的callback参数动态的生成回调函数名，通过传参的形式执行获取到的数据，这样的话，前端预定义好的函数就可以让传来的数据自动运行。
介绍跨域方式之前，我们先来修改本机的hosts文件如下:
127.0.0.1 localhost
127.0.0.1 test.com
127.0.0.1 a.test.com
127.0.0.1 b.test.com
这样本地地址就对应了不同的域。
JSONP的跨域方式是利用<script>标签的src属性可以跨域引用资源的特点，有这些属性的标签还有<img>、<iframe>，但是JSONP只支持get方式。
下面以点击获取随机新闻列表的例子来演示一下JSONP的具体工作原理(test.com访问a.test.com)
HTML:
<div class="container">
<ul class="news">
<li>第11日前瞻：中国冲击4金 博尔特再战</li>
<li>男双力争会师决赛 </li>
<li>女排将死磕巴西！</li>
</ul>
<button class="change">换一组</button>
</div>
首先，在前端，我们要在调用资源的时候动态创建script标签，并设置src属性指向资源的URL地址，代码如下:
document.querySelector('.change').addEventListener('click', function() {
var script = document.createElement('script')
script.setAttribute('src', '//a.test.com:8080/getNews?callback=appendHtml') //callback=appendHtml是给后端资源打包数据用的参数，同时也是前端定义的回调函数
document.head.appendChild(script)
document.head.removeChild(script) //删除script标签是因为script标签插入页面的时候资源已经请求到了
})
定义获取资源后需要执行的回调函数:
function appendHtml(news) {
var html = ''
for (var i = 0; i < news.length; i++) {
html += '<li>' + news[i] + '</li>'
}
document.querySelector('.news').innerHTML = html
}
后端是把前端发送的URL地址拿到的数据以前端定义的回调函数（appendHtml）的参数的形式返回给前端，这样到了前端就可以调用执行了:
var news = [
"第11日前瞻：中国冲击4金 博尔特再战200米羽球",
"正直播柴飚/洪炜出战 男双力争会师决赛",
"女排将死磕巴西！郎平安排男陪练模仿对方核心",
"没有中国选手和巨星的110米栏 我们还看吗？",
"中英上演奥运金牌大战",
"博彩赔率挺中国夺回第二纽约时报：中国因对手服禁药而丢失的奖牌最多",
"最“出柜”奥运？同性之爱闪耀里约",
"下跪拜谢与洪荒之力一样 都是真情流露"
]
var data = [];
for (var i = 0; i < 3; i++) {
var index = Math.floor(Math.random() * news.length);
data.push(news[index]);
}
var callback = req.query.callback; //查询前端有没有传入回调函数
if (callback) {
res.send(callback + '(' + JSON.stringify(data) + ')'); //数据以函数参数的方式传给前端
} else {
res.send(data);
}
这样我们就从test.com访问到了a.test.com下的资源。
二、cors
CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是一种 ajax 跨域请求资源的方式，支持现代浏览器，IE支持10以上。 实现方式很简单，当你使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin。 浏览器判断该响应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。所以 CORS 的表象是让你觉得它与同源的 ajax 请求没啥区别，代码完全一样 。
同样以上面的列子来演示。首先JS部分，发起AJAX请求（与同域相同）:
document.querySelector('.change').addEventListener('click', function () {
var xhr = new XMLHttpRequest();
xhr.open('get', '//a.test.com:8080/getNews', true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
appendHtml(JSON.parse(xhr.responseText))
}
}
window.xhr = xhr
})
function appendHtml(news) {
var html = ''
for (var i = 0; i < news.length; i++) {
html += '<li>' + news[i] + '</li>'
}
document.querySelector('.news').innerHTML = html
}
后端在向前端发送资源之前，设置请求头 "Access-Control-Allow-Origin":
var news = [
"第11日前瞻：中国冲击4金 博尔特再战200米羽球",
"正直播柴飚/洪炜出战 男双力争会师决赛",
"女排将死磕巴西！郎平安排男陪练模仿对方核心",
"没有中国选手和巨星的110米栏 我们还看吗？",
"中英上演奥运金牌大战",
"博彩赔率挺中国夺回第二纽约时报：中国因对手服禁药而丢失的奖牌最多",
"最“出柜”奥运？同性之爱闪耀里约",
"下跪拜谢与洪荒之力一样 都是真情流露"
]
var data = [];
for (var i = 0; i < 3; i++) {
var index = Math.floor(Math.random() * news.length);
data.push(news[index]);
}
res.header("Access-Control-Allow-Origin", "//test.com:8080"); // "//test.com:8080"表示只有“test.com:8080”域下发起的请求才可以调用本域下的资源
//res.header("Access-Control-Allow-Origin", "*"); //"*"表示任何域下发起请求都可以调用本域下的资源
res.send(data);
三、降域
降域是相对于iframe元素而言的 。
比如，域名为http://b.baidu.com/b (A)的网页以iframe的形式嵌在域名为http://a.baidu.com/a (B)的网页中，正常情况下，该请求不符合浏览器的同源策略，不能进行跨域访问。但是当我们在两个页面中分别设置documet.domain = baidu.com的时候（注意：这个方法有一个限制就是域名中必须有相同的部分），B页面就可以访问到A页面中的资源了。比如下面的代码：
B页面:
<html>
<style>
html,
body {
margin: 0;
}
input {
margin: 20px;
width: 200px;
}
</style>
<input id="input" type="text" placeholder="http://b.test.com/b.html">
<script>
// URL: http://b.test.com/b.html
document.querySelector('#input').addEventListener('input', function () {
window.parent.document.querySelector('input').value = this.value;
})
document.domain = 'test.com';
</script>
</html>
A页面:
<html>
<style>
.ct {
width: 910px;
margin: auto;
}
.main {
float: left;
width: 450px;
height: 300px;
border: 1px solid #ccc;
}
.main input {
margin: 20px;
width: 200px;
}
.iframe {
float: right;
}
iframe {
width: 450px;
height: 300px;
border: 1px dashed #ccc;
}
</style>
<div class="ct">
<h1>使用降域实现跨域</h1>
<div class="main">
<input type="text" placeholder="http://a.test.com:8080/a.html">
</div>
<iframe src="http://b.test.com:8080/b.html" frameborder="0"></iframe>
</div>
<script>
//URL: http://a.test.com:8080/a.html
document.querySelector('.main input').addEventListener('input', function () {
console.log(this.value);
window.frames[0].document.querySelector('input').value = this.value;
})
document.domain = "test.com"
</script>
</html>
通过a.test.com/a.html访问b.test.com/b.html，实现了跨域访问，效果如下:
四、postMessage
window.postMessage()是HTML5的新方法，IE8+支持。可以使用它来向其它的window对象发送数据，无论这个window对象是属于同源或不同源。
postMessage(data, origin)方法接收两个参数：
- data:要传递的数据。html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果。
- origin: 字符串参数。用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符
*，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。
同样以上面的例子来说明postMessage()的原理（A页面中嵌套了一个B页面）
那么我们可以在A页面中通过postMessage()方法向跨域的B页面传递数据
<html>
<style>
.ct {
width: 910px;
margin: auto;
}
.main {
float: left;
width: 450px;
height: 300px;
border: 1px solid #ccc;
}
.main input {
margin: 20px;
width: 200px;
}
.iframe {
float: right;
}
iframe {
width: 450px;
height: 300px;
border: 1px dashed #ccc;
}
</style>
<div class="ct">
<h1>使用降域实现跨域</h1>
<div class="main">
<input type="text" placeholder="http://a.test.com:8080/a.html">
</div>
<iframe src="//b.test.com:8080/b.html" frameborder="0"></iframe>
</div>
<script>
document.querySelector('.main input').addEventListener('input', function () {
window.frames[0].postMessage(this.value, '*')
})
window.addEventListener('message', function (e) {
document.querySelector('input').value = e.data
})
</script>
</html>
那么，我们怎么在B页面上接收A页面传递过来的数据呢，我们只要在B页面监听window的message事件就可以，消息内容储存在该事件对象的data属性中。
<html>
<input id="input" type="text" placeholder="http://b.test.com/b.html">
<script>
document.querySelector('input').addEventListener('input', function () {
window.parent.postMessage(this.value, '*')
})
window.addEventListener('message', function (e) {
document.querySelector('input').value = e.data
})
</script>
</html>
同样，如果想要在B页面发送数据，A页面接受数据，只要在B页面使用postMessage()方法，然后在A页面监听window的message事件即可。
最终页面得到的效果如下:
参考
