總結跨域的幾種方式

跨域整理
@(前端筆記)

跨域

只要協議、域名、端口有任何一個不一樣，都被看成是不一樣的域。
因爲瀏覽器的同源策略，其限制之一是不能經過ajax的方法情趣請求不一樣源的文檔。第二個限制是瀏覽器中不一樣域的框架(iframe)間是不能進行js的交互操做的。

一、經過document.domain跨域

修改document.domain的方式只適用於不一樣子域的框架間的交互。

二、經過location.hash跨域

由於父窗口能夠對iframe進行URL讀寫，iframe也能夠讀寫父窗口的URL，URL有一部分被稱爲hash，就是#號及其後面的字符，它通常用於瀏覽器錨點定位，Server端並不關心這部分，應該說HTTP請求過程當中不會攜帶hash，因此這部分的修改不會產生HTTP請求，可是會產生瀏覽器歷史記錄。此方法的原理就是改變URL的hash部分來進行雙向通訊。每一個window經過改變其餘 window的location來發送消息（因爲兩個頁面不在同一個域下IE、Chrome不容許修改parent.location.hash的值，因此要藉助於父窗口域名下的一個代理iframe），並經過監聽本身的URL的變化來接收消息。這個方式的通訊會形成一些沒必要要的瀏覽器歷史記錄，並且有些瀏覽器不支持onhashchange事件，須要輪詢來獲知URL的改變，最後，這樣作也存在缺點，諸如數據直接暴露在了url中，數據容量和類型都有限等。

三、 經過HTML5的postMessage方法跨域

高級瀏覽器Internet Explorer 8+, chrome，Firefox , Opera 和 Safari 都將支持這個功能。這個功能主要包括接受信息的"message"事件和發送消息的"postMessage"方法。好比damonare.cn域的A頁面經過iframe嵌入了一個google.com域的B頁面，能夠經過如下方法實現A和B的通訊

四、經過jsonp跨域

以上幾種都是雙向通訊的，即兩個iframe，頁面與iframe或是頁面與頁面之間的，下面說幾種單項跨域的（通常用來獲取數據），由於經過script標籤引入的js是不受同源策略的限制的。因此咱們能夠經過script標籤引入一個js或者是一個其餘後綴形式（如php，jsp等）的文件，此文件返回一個js函數的調用。

JSONP的優缺點

• SONP的優勢是：
  它不像XMLHttpRequest對象實現的Ajax請求那樣受到同源策略的限制；它的兼容性更好，在更加古老的瀏覽器中均可以運行，不須要XMLHttpRequest或ActiveX的支持；而且在請求完畢後能夠經過調用callback的方式回傳結果。
• JSONP的缺點則是：

它只支持GET請求而不支持POST等其它類型的HTTP請求；它只支持跨域HTTP請求這種狀況，不能解決不一樣域的兩個頁面之間如何進行JavaScript調用的問題。

五、經過CORS跨域

CORS（Cross-Origin Resource Sharing）跨域資源共享，定義了必須在訪問跨域資源時，瀏覽器與服務器應該如何溝通。CORS背後的基本思想就是使用自定義的HTTP頭部讓瀏覽器與服務器進行溝通，從而決定請求或響應是應該成功仍是失敗。目前，全部瀏覽器都支持該功能，IE瀏覽器不能低於IE10。整個CORS通訊過程，都是瀏覽器自動完成，不須要用戶參與。對於開發者來講，CORS通訊與同源的AJAX通訊沒有差異，代碼徹底同樣。瀏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感受。

• CORS與JSONP的對比

  • JSONP只能實現GET請求，而CORS支持全部類型的HTTP請求。
  • 使用CORS，開發者可使用普通的XMLHttpRequest發起請求和得到數據，比起JSONP有更好的錯誤處理。
  • JSONP主要被老的瀏覽器支持，它們每每不支持CORS，而絕大多數現代瀏覽器都已經支持了CORS）。