關于跨域，個人總結了以下幾種方法

• JSONP
• CORS
• WebSocket
• document.domain
• window.name
• location.hash
• postMessage

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

---

webSocket

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

和使用XHRHttpRequest對象一樣，我們首先要實例化一個WebSocket對象：

傳入的參數為響應WebSocket請求的地址。

同樣類似AJAX的是，WebSocket對象也有一個readyState屬性，用來表示對象實例當前所處的鏈接狀態，有四個值：

0：表示正在連接中（CONNECTING）；
1：表示連接成功，可以通信（OPEN）；
2：表示連接正在關閉（CLOSING）；
3：表示連接已經關閉或打開連接失敗（CLOSED）；
我們可以通過判斷這個值來執行我們相應的代碼。

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

onopen：用于指定連接成功后的回調函數；
onclose：用于指定連接關閉后的回調函數；
onmessage：用于指定收到服務器數據后的回調函數；
onerror：用于指定報錯時的回調函數；
通過.send()方法，我們擁有了向服務器發送數據的能力（WebSocket還允許我們發送二進制數據）。

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

---

CORS

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

---

JSONP

我們發現，Web頁面上調用js文件時則不受是否跨域的影響（不僅如此，我們還發現凡是擁有”src”這個屬性的標簽都擁有跨域的能力，比如<script>、<img>、<iframe>）；

于是可以判斷，當前階段如果想通過純web端（ActiveX控件、服務端代理、屬于未來的HTML5之Websocket等方式不算）跨域訪問數據就只有一種可能，那就是在遠程服務器上設法把數據裝進js格式的文件里，供客戶端調用和進一步處理；

恰巧我們已經知道有一種叫做JSON的純字符數據格式可以簡潔的描述復雜數據，更妙的是JSON還被js原生支持，所以在客戶端幾乎可以隨心所欲的處理這種格式的數據；

這樣子解決方案就呼之欲出了，web客戶端通過與調用腳本一模一樣的方式，來調用跨域服務器上動態生成的js格式文件（一般以JSON為后綴），顯而易見，服務器之所以要動態生成JSON文件，目的就在于把客戶端需要的數據裝入進去。

、客戶端在對JSON文件調用成功之后，也就獲得了自己所需的數據，剩下的就是按照自己需求進行處理和展現了，這種獲取遠程數據的方式看起來非常像AJAX，但其實并不一樣。

為了便于客戶端使用數據，逐漸形成了一種非正式傳輸協議，人們把它稱作JSONP，該協議的一個要點就是允許用戶傳遞一個callback參數給服務端，然后服務端返回數據時會將這個callback參數作為函數名來包裹住JSON數據，這樣客戶端就可以隨意定制自己的函數來自動處理返回數據了。

document.domain

這個主要針對跨域訪問cookie的情況
兩個網頁一級域名相同，只是二級域名不同，瀏覽器允許通過設置document.domain共享 Cookie。
舉例來說，A網頁是http://w1.example.com/a.html，B網頁是http://w2.example.com/b.html，那么只要設置相同的document.domain，兩個網頁就可以共享Cookie。
其實也可以在服務器端進行設置：
指定Cookie的所屬域名為一級域名，比如.example.com。
Set-Cookie: key=value; domain=.example.com; path=/
這樣二級域名和三級域名不用做任何設置都可以共享這個cookie。
未完待續。。。

總結

以上是生活随笔為你收集整理的关于跨域的总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。