跨域以及跨域的幾種方式
講解跨域之前我們先來看看什么是同源策略
什么是同源策略
通常來說，瀏覽器出于安全方面的考慮，只允許與本域下的接口交互。不同源的客戶端腳本在沒有明確授權的情況下，不許讀寫對方的資源，
本域指的是
－同協議：比如都是http或者https
－同域名：比如都是http://baidu.com/a和http://baidu.com/b
－同端口：比如都是80端口
同源:
http://baidu.com/a/b.js 和http://baidu.com/index.php
不同源:
http://baidu.com/main.js 和https://baidu.com/a.php (協議不同)
http://baidu.com/main.js和 http://bbs.baidu.com/a.php(域名不同，域名必須完全相同才可以)
http://baidu.com/main.js 和 http://baidu.com:8080/a.php(端口不同,第一個是80)
***需要注意的是: 對于當前頁面來說頁面存放 JS 文件的域不重要，重要的是加載該該JS的頁面所在什么域 **
什么是跨域？跨域有幾種實現形式
跨域就是實現不同域的接口可以進行數據交互
JSONP----JSONP 的原理是什么
html中script標簽可以引入其他域下的js，比如引入線上的jquery庫。利用這個特性，可實現跨域訪問接口。不過需要后端支持。
web頁面中，通過script標簽獲取js代碼可以進行跨域，我們可以動態的創建script標簽，設置src屬性指向我們請求資源的url地址，然后放到head標簽中。這樣就可以把不同域的數據加載到本域名下，不過需要后端支持jsonp，也就是通過前端的url中的callback參數動態的生成回調函數名，通過傳參的形式執行獲取到的數據，這樣的話，前端預定義好的函數就可以讓傳來的數據自動運行。-
CORS 全稱是跨域資源共享（Cross-Origin Resource Sharing），是一種 ajax 跨域請求資源的方式，支持現代瀏覽器，IE支持10以上。 實現方式很簡單，當你使用 XMLHttpRequest 發送請求時，瀏覽器發現該請求不符合同源策略，會給該請求加一個請求頭：Origin，后臺進行一系列處理，如果確定接受請求則在返回結果中加入一個響應頭：Access-Control-Allow-Origin; 瀏覽器判斷該相應頭中是否包含 Origin 的值，如果有則瀏覽器會處理響應，我們就可以拿到響應數據，如果不包含瀏覽器直接駁回，這時我們無法拿到響應數據。所以 CORS 的表象是讓你覺得它與同源的 ajax 請求沒啥區別，代碼完全一樣。CORS兼容IE10+ 。
-
降域
降域是相對于iframe元素而言的 。
一般來說域名為
http://b.baidu.com/b(A)的網頁以iframe的形式嵌在域名為http://a.baidu.com/a(B)的網頁中，瀏覽器發現該請求不符合同源策略，正常情況下不能進行跨域訪問，但是當我們在兩個頁面中分別設置documet.domain = baidu.com的時候（注意觀察這個方法有一個限制就是 域名中必須有相同的部分），B頁面就可以訪問到A頁面中的資源了，比如下面的代碼: -
postMessage()
window.postMessage()是HTML5的新方法，可以使用它來向其它的window對象發送數據，無論這個window對象是屬于同源或不同源，IE8+支持。
postMessage(data, origin)方法接收兩個參數
- data:要傳遞的數據。html5規范中提到該參數可以是JavaScript的任意基本類型或可復制的對象，然而并不是所有瀏覽器都做到了這點兒，部分瀏覽器只能處理字符串參數，所以我們在傳遞參數的時候需要使用JSON.stringify()方法對對象參數序列化，在低版本IE中引用json2.js可以實現類似效果。
- origin:字符串參數，用來限定接收消息的那個window對象所在的域，如果不想限定域，可以使用通配符 * ，這樣可以傳遞給任意窗口，如果要指定和當前窗口同源的話設置為"/"
跨域方式的演示
介紹跨域方式之前，我們先來修改本機的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
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);
}
CORS
CORS是AJAX跨域請求的一種方式，目前只支持IE10以上瀏覽器，具體兼容如下圖
同樣以上面的列子來演示
首先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", "http://test.com:8080"); // //test.com:8080表示只有//test.com:8080下發起請求才可以調用本域下的資源
//res.header("Access-Control-Allow-Origin", "*"); //*表示任何域下發起請求都可以調用本域下的資源
res.send(data);
降域
降域是相對于iframe元素而言的 。
一般來說域名為http://b.test.com/b(A)的網頁以iframe的形式嵌在域名為http://a.test.com/a(B)的網頁中，瀏覽器發現該請求不符合同源策略，正常情況下不能進行跨域訪問，但是當我們在兩個頁面中分別設置documet.domain = test.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的新方法，可以使用它來向其它的window對象發送數據，無論這個window對象是屬于同源或不同源，IE8+支持。
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="http://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事件即可。
最終頁面得到的效果如下:
