摘要：了解跨域這件事，我們先看看導(dǎo)致會存在跨域問題的根源瀏覽器的同源策略瀏覽器的同源策略又是什么鬼好像了解一點，但是又說不清楚。請參考阮老師的跨域資源共享詳解

跨域，顧名思義，即為請求了不同域的資源。
了解跨域這件事，我們先看看導(dǎo)致會存在跨域問題的根源：瀏覽器的同源策略
瀏覽器的同源策略又是什么鬼？ 好像了解一點，但是又說不清楚。這次我們就來詳細(xì)探索一下。

聲明一下，本文是參考眾多其他有關(guān)跨域文章結(jié)合自己技術(shù)認(rèn)識所做的記錄，請與
瀏覽器同源政策及其規(guī)避方法參考著看更加合適。

MDN
維基百科：
In computing, the same-origin policy is an important concept in the web application security model. Under the policy, a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin. An origin is defined as a combination of URI scheme, host name, and port number. This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page through that page"s Document Object Model.
簡單翻譯一下：
在web應(yīng)用安全模型中，同源策略是一個重要的概念。在該策略下，僅倆個頁面有相同的源, web瀏覽器才允許包含在第一個頁面中的腳本訪問第二個web頁面的數(shù)據(jù)。源被定義為 URI協(xié)議，主機(jī)名，端口號的組合。該策略阻止了一個頁面的惡意腳本通過文檔對象模型(DOM)獲得其他的web頁面的敏感數(shù)據(jù).
那為什么會有同源策略呢，可以參考一下，CSRF這篇文章談到CSRF這種情況。
那哪些數(shù)據(jù)會被限制呢？
敏感數(shù)據(jù)一般指的是瀏覽器中的Cookies, SessionStorage, LocalStorage, IndexedDB數(shù)據(jù), CacheStorage, ApplicationCache...；

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

“
如果非同源，共有三種行為受到限制。
（1） Cookie、LocalStorage 和 IndexDB 無法讀取。
（2） DOM 無法獲得。
（3） AJAX 請求不能發(fā)送。
 雖然這些限制是必要的，但是有時很不方便，合理的用途也受到影響。下面，我將詳細(xì)介紹，如何規(guī)避上面三種限制。
”

瀏覽器允許通過設(shè)置document.domain共享 Cookie。
document.domain的寫操作是有要求的。只能寫入基礎(chǔ)域名和當(dāng)前域名，其他域名是無法寫入的，所以domain這種方式只能在親子域名之間共享cookies
// 由于還沒有相關(guān)資源（三級域名資源，域名資源），沒有做驗證

頁面1 localhost:8080的頁面，包含一個頁面2 (iframe = http://localhost:8081);
頁面2中訪問window.parent.document報跨源錯誤
在頁面2中window.parent可以訪問,但是在iframe中訪問獲取到的window.parent對象中屬性缺少了有關(guān)DOM的部分，而直接在頁面1中查看window對象，可以看到document屬性對象，而使用夸源window.parent無法獲取document屬性對象

片段識別符（fragment identifier）

window.name

跨文檔通信API（Cross-document messaging）

所以這種方式，無論是否夸源，父窗口可以通過更改子窗口的iframe的src中的hash值來傳遞數(shù)據(jù)給子窗口;
但是 在存在跨源的情況下，子窗口獲取parent.location.href(可寫不可讀)讀操作會報跨源錯誤，所以子窗口課件寫入url的方式傳遞數(shù)據(jù)給父窗口。
片段識別符方式可以父傳子，子傳父。

document.getElementById("iframe").contentWindow.name
訪問出錯，所以無法跨域

頁面1 調(diào)用iframe的iframe.contentWindow.postMessage(data,"http://localhost:8081")
頁面2 調(diào)用window的 window.parent.postMessage(data,"http://localhost:8080")

“
同源政策規(guī)定，AJAX請求只能發(fā)給同源的網(wǎng)址，否則就報錯。
除了架設(shè)服務(wù)器代理（瀏覽器請求同源服務(wù)器，再由后者請求外部服務(wù)），有三種方法規(guī)避這個限制。

JSONP
WebSocket
CORS
”

// 客戶端（瀏覽器頁面）
function addScriptTag(src) {
  var script = document.createElement("script");
  script.setAttribute("type","text/javascript");
  script.src = src;
  document.body.appendChild(script);
}

window.onload = function () {
  addScriptTag("http://example.com/ip?callback=foo");//需要指定回調(diào)函數(shù)名
}

function foo(data) {
  console.log("Your public IP address is: " + data.ip);
};


//服務(wù)端
foo({
  "ip": "8.8.8.8"
});

CORS是跨源資源分享（Cross-Origin Resource Sharing）的縮寫。它是W3C標(biāo)準(zhǔn)，是跨源AJAX請求的根本解決方法。相比JSONP只能發(fā)GET請求，CORS允許任何類型的請求。
請參考 阮老師的跨域資源共享 CORS 詳解