摘要：關(guān)于跨域，個(gè)人總結(jié)了以下幾種方法其中等方法常用，的方法既不復(fù)雜，也能兼容到幾乎所有瀏覽器，這真是極好的一種跨域方法。這個(gè)主要針對(duì)跨域訪問的情況兩個(gè)網(wǎng)頁一級(jí)域名相同，只是二級(jí)域名不同，瀏覽器允許通過設(shè)置共享。

JSONP

CORS

WebSocket

document.domain

window.name

location.hash

postMessage

其中：CORS、jsonp等方法常用，window.name的方法既不復(fù)雜，也能兼容到幾乎所有瀏覽器，這真是極好的一種跨域方法。

WebSocket是一種在單個(gè)TCP連接上進(jìn)行全雙工通訊的協(xié)議。WebSocket與HTTP協(xié)議其實(shí)兩者的關(guān)系像是兩兄弟，各自有著各自擅長的領(lǐng)域，而且時(shí)不時(shí)還一同協(xié)作解決難題。
WebSocket要解決的問題：當(dāng)服務(wù)器資源到位時(shí)，能夠主動(dòng)通知瀏覽器并返回相應(yīng)資源。HTML5標(biāo)準(zhǔn)推出了WebSocket協(xié)議。
本身就不受瀏覽器“同源策略”的限制，WebSocket協(xié)議下的通訊機(jī)制，客戶端和服務(wù)端一旦建立連接，就可以順暢的互發(fā)數(shù)據(jù)，因此WebSocket協(xié)議本身就是“有狀態(tài)的”，不需要Cookie的幫忙，既然沒有Cookie，自然也不需要“同源策略”去保護(hù)。
下面來說說webSocket的具體實(shí)現(xiàn)：
像發(fā)起AJAX請(qǐng)求一樣，發(fā)起WebSocket請(qǐng)求需要借助瀏覽器提供的WebSocket對(duì)象，該對(duì)象提供了用于創(chuàng)建和管理WebSocket連接，以及通過該連接收發(fā)數(shù)據(jù)的API。所有的瀏覽器都默認(rèn)提供了WebSocket對(duì)象。讓我們看看該對(duì)象的用法：

和使用XHRHttpRequest對(duì)象一樣，我們首先要實(shí)例化一個(gè)WebSocket對(duì)象：

傳入的參數(shù)為響應(yīng)WebSocket請(qǐng)求的地址。

同樣類似AJAX的是，WebSocket對(duì)象也有一個(gè)readyState屬性，用來表示對(duì)象實(shí)例當(dāng)前所處的鏈接狀態(tài)，有四個(gè)值：

0：表示正在連接中（CONNECTING）；
1：表示連接成功，可以通信（OPEN）；
2：表示連接正在關(guān)閉（CLOSING）；
3：表示連接已經(jīng)關(guān)閉或打開連接失?。–LOSED）；
我們可以通過判斷這個(gè)值來執(zhí)行我們相應(yīng)的代碼。

除此之外，WebSocket對(duì)象還提供給我們一系列事件屬性，使我們控制連接過程中的通信行為：

onopen：用于指定連接成功后的回調(diào)函數(shù)；
onclose：用于指定連接關(guān)閉后的回調(diào)函數(shù)；
onmessage：用于指定收到服務(wù)器數(shù)據(jù)后的回調(diào)函數(shù)；
onerror：用于指定報(bào)錯(cuò)時(shí)的回調(diào)函數(shù)；
通過.send()方法，我們擁有了向服務(wù)器發(fā)送數(shù)據(jù)的能力（WebSocket還允許我們發(fā)送二進(jìn)制數(shù)據(jù)）。

如何知道何時(shí)我們的數(shù)據(jù)發(fā)送完畢呢？我們需要使用WebSocket對(duì)象的bufferedAmount屬性，該屬性的返回值表示了還有多少字節(jié)的二進(jìn)制數(shù)據(jù)沒有發(fā)送出去，所以我們可以通過判斷該值是否為0而確定數(shù)據(jù)是否發(fā)送結(jié)束。

阮一峰博客http://www.ruanyifeng.com/blo...
在http header中寫入允許訪問的域名。
Access-Control-Allow-Origin，該字段是必須的。它的值要么是請(qǐng)求時(shí)Origin字段的值，要么是一個(gè)*，表示接受任意域名的請(qǐng)求。
需要注意的是：CORS請(qǐng)求默認(rèn)情況下是不會(huì)發(fā)送cookie的，所以需要在服務(wù)器的響應(yīng)中設(shè)置：
Access-Control-Allow-Credentials: true
除此之外，還需要在AJAX請(qǐng)求中設(shè)置：
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
CORS請(qǐng)求分為簡單請(qǐng)求和非簡單請(qǐng)求：
簡單請(qǐng)求：需要AJAX里的onerrer回調(diào)函數(shù)進(jìn)行捕獲，因?yàn)橐部赡軙?huì)返回200。
非簡單請(qǐng)求：瀏覽器先詢問服務(wù)器，當(dāng)前網(wǎng)頁所在的域名是否在服務(wù)器的許可名單之中，以及可以使用哪些HTTP動(dòng)詞和頭信息字段。只有得到肯定答復(fù)，瀏覽器才會(huì)發(fā)出正式的XMLHttpRequest請(qǐng)求，否則就報(bào)錯(cuò)。
會(huì)首先發(fā)送一個(gè)預(yù)檢請(qǐng)求，請(qǐng)求方法為：options，并且在請(qǐng)求頭中會(huì)包含相應(yīng)字段：
Access-Control-Request-Method
Access-Control-Request-Headers
如果響應(yīng)頭中有CORS相關(guān)字段：
Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Headers
瀏覽器檢查響應(yīng)頭中包含這三個(gè)字段，則預(yù)檢請(qǐng)求成功；否則，則會(huì)拋出錯(cuò)誤。一旦服務(wù)器通過了"預(yù)檢"請(qǐng)求，以后每次瀏覽器正常的CORS請(qǐng)求，就都跟簡單請(qǐng)求一樣，會(huì)有一個(gè)Origin頭信息字段。服務(wù)器的回應(yīng)，也都會(huì)有一個(gè)Access-Control-Allow-Origin頭信息字段。

我們發(fā)現(xiàn)，Web頁面上調(diào)用js文件時(shí)則不受是否跨域的影響（不僅如此，我們還發(fā)現(xiàn)凡是擁有”src”這個(gè)屬性的標(biāo)簽都擁有跨域的能力，比如