什么是跨域？如何實現？

1.什么是跨域

跨域，是指瀏覽器不能執行其他網站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對JavaScript實施的安全限制。

這里說明一下，無法跨域是瀏覽器對於用戶安全的考慮，如果自己寫個沒有同源策略的瀏覽器，完全不用考慮跨域問題了。是瀏覽器的鍋，對。

同源策略限制了一下行為：

Cookie、LocalStorage 和 IndexDB 無法讀取

DOM 和 JS 對象無法獲取

Ajax請求發送不出去

2.場景

首先狹義的同源就是指，域名、協議、端口均為相同。下面舉個例子：

3.如何跨域

3.1.jsonp方式

jsonp跨域是JavaScript設計模式中的一種代理模式。在html頁面中通過相應的標簽從不同域名下加載靜態資源文件是被瀏覽器允許的（從js中調用不行），所以我們可以通過這個“漏洞”來進行跨域。一般，我們可以動態的創建script標簽，再去請求一個帶參網址來實現跨域通信。局限是只能get請求。下面是兩種前端實現方式：

 

 

特別注意的是，上面代碼里傳入的callback參數是服務器傳回數據后需要調用的方法，上面代碼中方法是callback();

服務器端傳回的數據格式應該是 callback(數據)

另外有時會出現406錯誤，這時候就需要在響應頭中添加Access-Control-Allow-Origin,值為*，表示的是允許所有域名訪問。

response.setHeader("Access-Control-Allow-Origin", "*");   Jsonp很好用對吧，但只能 get請求。

3.2. 跨域資源共享CORS

這是目前主流的解決方案。

CORS是一個W3C標准，全稱是”跨域資源共享”（Cross-origin resource sharing）。
對於這個方式，阮一峰老師總結的文章特別好，希望深入了解的可以看一下http://www.ruanyifeng.com/blog/2016/04/cors.html。

通過在HTTP Header中加入擴展字段，服務器在相應網頁頭部加入字段表示允許訪問的domain和HTTP method，客戶端檢查自己的域是否在允許列表中，決定是否處理響應。

實現的基礎是JavaScript不能夠操作HTTP Header。某些瀏覽器插件實際上是具有這個能力的。

服務器端在HTTP的響應頭中加入（頁面層次的控制模式）：

Access-Control-Allow-Origin: example.com
Access-Control-Request-Method: GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization, Accept, Range, Origin

Access-Control-Expose-Headers: Content-Range

Access-Control-Max-Age: 3600

多個域名之間用逗號分隔，表示對所示域名提供跨域訪問權限。"*"表示允許所有域名的跨域訪問。

客戶端可以有兩種行為：

1. 發送OPTIONS請求，請求Access-Control信息。如果自己的域名在允許的訪問列表中，則發送真正的請求，否則放棄請求發送。
2. 直接發送請求，然后檢查response的Access-Control信息，如果自己的域名在允許的訪問列表中，則讀取response body，否則放棄。

本質上服務端的response內容已經到達本地，JavaScript決定是否要去讀取。

這里我就簡單的說一說大體流程。

1. 對於客戶端，我們還是正常使用xhr對象發送ajax請求。
   唯一需要注意的是，我們需要設置我們的xhr屬性withCredentials為true，不然的話，cookie是帶不過去的哦，設置： xhr.withCredentials = true;
2. 對於服務器端，需要在 response header中設置如下兩個字段:
   Access-Control-Allow-Origin: http://www.yourhost.com
Access-Control-Allow-Credentials:true
   這樣，我們就可以跨域請求接口了。

在django的實際項目中,跨域用CORS技術構建一個中間件，來解決跨域問題：

class CORSMiddleware(MiddlewareMixin): def process_response(self, request, response): """ 解決跨域問題 :param request: :param response: :return: """ # 添加響應頭 # 允許你的域名來獲取我的數據 response['Access-Control-Allow-Origin'] = "*" # 允許你攜帶Content-Type請求頭 # response['Access-Control-Allow-Headers'] = "Content-Type" # 允許你發送DELETE,PUT # response['Access-Control-Allow-Methods'] = "DELETE,PUT" return response

服務器代理

瀏覽器有跨域限制，但是服務器不存在跨域問題，所以可以由服務器請求所要域的資源再返回給客戶端。

服務器代理是萬能的。

document.domain來跨子域

對於主域名相同，而子域名不同的情況，可以使用document.domain來跨域
這種方式非常適用於iframe跨域的情況，直接看例子吧
比如a頁面地址為 a.yourhost.com b頁面為 b.yourhost.com。
這樣就可以通過分別給兩個頁面設置 document.domain = yourhost.com 來實現跨域。
之后，就可以通過 parent 或者 window[‘iframename’]等方式去拿到iframe的window對象了。

使用window.name進行跨域

window.name跨域同樣是受到同源策略限制，父框架和子框架的src必須指向統一域名。window.name的優勢在於，name的值在不同的頁面(或者不同的域名)，加載后仍然存在，除非你顯示的更改。並且支持的長度達到2M.

代碼如下：

//a頁面的代碼
<script type="text/javascript"> iframe = document.createElement('iframe'); iframe.style.display = 'none'; var state = 0; iframe.onload = function() { if(state === 1) { var data = iframe.contentWindow.name; console.log(data); iframe.contentWindow.document.write(''); iframe.contentWindow.close(); document.body.removeChild(iframe); } else if(state === 0) { state = 1; iframe.contentWindow.location = 'http://m.zhuanzhuan.58.com:8887/b.html'; } }; document.body.appendChild(iframe); </script> 

//b頁面代碼
<script type="text/javascript"> window.name = "hello"; </script> 

window.location.hash跨域

location.hash方式跨域，是子框架具有修改父框架src的hash值，通過這個屬性進行傳遞數據，且更改hash值，頁面不會刷新。但是傳遞的數據的字節數是有限的。

注意：父子框架受同源策略的限制

代碼如下:

//a頁面的代碼 <script type="text/javascript"> iframe = document.createElement('iframe'); iframe.style.display = 'none'; var state = 0; iframe.onload = function() { if(state === 1) { var data = window.location.hash; console.log(data); iframe.contentWindow.document.write(''); iframe.contentWindow.close(); document.body.removeChild(iframe); } else if(state === 0) { state = 1; iframe.contentWindow.location = 'http://m.zhuanzhuan.58.com:8887/b.html'; } }; document.body.appendChild(iframe); </script> //b頁面代碼 <script type="text/javascript"> parent.location.hash = "world"; </script> 

window.top

window.top方法可以訪問最頂層的window對象，可以取到最頂層window對象的屬性和方法。這樣子框架就可以操作父頁面的交互了。window.parent可以得到父框架的window對象。

代碼如下：

//a頁面代碼 <script type="text/javascript"> function funa(){ console.log("a頁面的方法"); } iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.src = 'http://m.zhuanzhuan.58.com:8887/b.html'; document.body.appendChild(iframe); </script> //b頁面的代碼 <script type="text/javascript"> console.log(window.top.funa()); function funb(){ console.log("b頁面的方法"); } iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.src = 'http://m.zhuanzhuan.58.com:8887/c.html'; document.body.appendChild(iframe); </script> //c頁面的代碼 <script type="text/javascript"> console.log(window.parent.funb()); </script> 

使用postMessage實現頁面之間通信

信息傳遞除了客戶端與服務器之前的傳遞，還存在以下幾個問題：

• 頁面和新開的窗口的數據交互。
• 多窗口之間的數據交互。
• 頁面與所嵌套的iframe之間的信息傳遞。

window.postMessage是一個HTML5的api，允許兩個窗口之間進行跨域發送消息。這個應該就是以后解決dom跨域通用方法了，具體可以參照MDN。

補充： 其實還有一些方法，比如window.name和location.hash。就很適用於iframe的跨域，不過iframe用的比較少了，所以這些方法也就有點過時了。

這些就是我對跨域的了解了，實際情況下，一般用cors，jsonp等常見方法就可以了。不過遇到了一些非常規情況，我們還是需要知道有更多的方法可以選擇的。