跨域，了解一下

跨域，顧名思義，即為請求了不同域的資源。

了解跨域這件事，我們先看看導致會存在跨域問題的根源：瀏覽器的同源策略

瀏覽器的同源策略又是什麼鬼？好像了解一點，但是又說不清楚。這次我們就來詳細探索一下。

宣告一下，本文是參考眾多其他有關跨域文章結合自己技術認識所做的記錄，請與

瀏覽器同源政策及其規避方法參考著看更加合適。

mdn阮一峰老師還對同源策略對於非同源，限制的行為做了歸納：

「如果非同源，共有三種行為受到限制。（1） cookie、localstorage 和 indexdb 無法讀取。（2） dom 無法獲得。（3） ajax 請求不能傳送。雖然這些限制是必要的，但是有時很不方便，合理的用途也受到影響。下面，我將詳細介紹，如何規避上面三種限制。

」

瀏覽器允許通過設定document.domain共享 cookie。

document.domain的寫操作是有要求的。只能寫入基礎網域名稱和當前網域名稱，其他網域名稱是無法寫入的，所以domain這種方式只能在親子網域名稱之間共享cookies

//由於還沒有相關資源（**網域名稱資源，網域名稱資源），沒有做驗證

頁面1 localhost:8080的頁面，包含乙個頁面2 (iframe = http://localhost:8081); 頁面2中訪問window.parent.document報跨源錯誤

在頁面2中window.parent可以訪問,但是在iframe中訪問獲取到的window.parent物件中屬性缺少了有關dom的部分，而直接在頁面1中檢視window物件，可以看到document屬性物件，而使用誇源window.parent無法獲取document屬性物件

片段識別符 fragment identifier

所以這種方式，無論是否誇源，父視窗可以通過更改子視窗的iframe的src中的hash值來傳遞資料給子視窗;

但是在存在跨源的情況下，子視窗獲取parent.location.href(可寫不可讀)讀操作會報跨源錯誤，所以子視窗課件寫入url的方式傳遞資料給父視窗。

片段識別符方式可以父傳子，子傳父。

window.name

document.getelementbyid('iframe').contentwindow.name

訪問出錯，所以無法跨域

window.postmessage

頁面1 呼叫iframe的iframe.contentwindow.postmessage(data,"http://localhost:8081")

頁面2 呼叫window的 window.parent.postmessage(data,'http://localhost:8080')

「同源政策規定，ajax請求只能發給同源的**，否則就報錯。除了架設伺服器**（瀏覽器請求同源伺服器，再由後者請求外部服務），有三種方法規避這個限制。 jsonp websocket cors

」

jsonp

// 客戶端（瀏覽器頁面）
function addscripttag(src) 
window.onload = function () 
function foo(data) ;
//服務端
foo();

cors

cors是跨源資源分享（cross-origin resource sharing）的縮寫。它是w3c標準，是跨源ajax請求的根本解決方法。相比jsonp只能發get請求，cors允許任何型別的請求。

請參考阮老師的跨域資源共享 cors 詳解