資訊專欄INFORMATION COLUMN
摘要：經(jīng)歷了幾場筆試面試，屢次被問到關(guān)于如何實(shí)現(xiàn)跨域。轉(zhuǎn)自個(gè)人博客關(guān)于跨域什么是跨域一般來說，如果你在開發(fā)中需要進(jìn)行跨域操作從一個(gè)非同源網(wǎng)站發(fā)送請(qǐng)求獲取數(shù)據(jù)，一般而言，你在瀏覽器控制臺(tái)看到的結(jié)果為同源策略說到跨域就不得不提同源策略。
前言
轉(zhuǎn)眼就是秋招季啦。經(jīng)歷了幾場筆試面試，屢次被問到關(guān)于如何實(shí)現(xiàn)跨域。老實(shí)說，之前都是紙上談兵，也沒有項(xiàng)目需要跨域，甚至覺得這個(gè)東西沒什么意義。直到今天項(xiàng)目中遇到了跨域問題，看了不少資料才理解跨域的普遍性和意義。特寫此篇文章整理自己所得。
轉(zhuǎn)自個(gè)人博客: 關(guān)于跨域
一般來說，如果你在開發(fā)中需要進(jìn)行跨域操作（從一個(gè)非同源網(wǎng)站發(fā)送請(qǐng)求獲取數(shù)據(jù)），一般而言，你在瀏覽器控制臺(tái)看到的結(jié)果為：
XMLHttpRequest cannot load http://external-domain/service. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://my-domain’ is therefore not allowed access.
同源策略說到跨域就不得不提“同源策略”。
同源策略是Web瀏覽器針對(duì)惡意的代碼所進(jìn)行的措施，為了防止世界被破壞，為了保護(hù)世界的和平，Web瀏覽器，采取了同源策略，只允許腳本讀取和所屬文檔來源相同的窗口和文檔的屬性。
那么，怎么判斷文檔來源是否相同呢？很簡單，看三個(gè)部分： 協(xié)議、主機(jī)、端口號(hào)。只要其中一個(gè)部分不同，則不同源。
來自 home.example.com 的文檔里的腳本讀取 developer.example.com載入的文檔的屬性。
來自 home.example.com 的文檔里的腳本讀取 text.segmentfault.com載入的文檔的屬性
如何跨域 設(shè)置domain屬性針對(duì)上述應(yīng)用場景的第一種情況，可以設(shè)置Document對(duì)象的domain屬性。但是設(shè)置時(shí)使用的字符串必須具有有效的域前綴或者它本身。
PS: domain值中必須有一個(gè)點(diǎn)號(hào)。
PS: domain不能由松散的變?yōu)榫o繃的。
//初始值 "home.example.com" document.domain = "example.com"; //OK document.domain = "home.example.com"; //NO,不能由松散變緊繃 document.domain = "example"; //NO，必須有一個(gè)點(diǎn)號(hào) document.domain = "another.com"; //NO， 必須是有效域前綴或其本身JSONP
JSONP由兩部分組成： 回調(diào)函數(shù)和數(shù)據(jù)。
原理：通過動(dòng)態(tài)
某些API(例如Github API)允許你定義一個(gè)回調(diào)函數(shù)，當(dāng)請(qǐng)求返回時(shí)執(zhí)行該函數(shù)。
function logResults(json){
console.log(json);
}
$.ajax({
url: "https://api.github.com/users/jeresig",
dataType: "jsonp",
jsonpCallback: "logResults"
});
運(yùn)行結(jié)果如下：
優(yōu)點(diǎn):
兼容性強(qiáng)。
簡單易用，能之間訪問響應(yīng)文本，支持瀏覽器與服務(wù)器之間雙向通信。
不足：
只能用GET方法，不能使用POST方法
無法判斷請(qǐng)求是否失敗，沒有錯(cuò)誤處理。
跨域資源共享CORS需要瀏覽器和服務(wù)器同時(shí)支持。
原理：使用"Origin:"請(qǐng)求頭和"Access-Control-Allow-Origin"響應(yīng)頭來擴(kuò)展HTTP。其實(shí)就是利用新的HTTP頭部來進(jìn)行瀏覽器與服務(wù)器之間的溝通。
針對(duì)前端代碼而言，變化的地方在于相對(duì)路徑需改為絕對(duì)路徑。
//以前的方式
var xhr = new XMLHttpRequest();
xhr.open("GET", "/test", true);
xhr.send();
//CORS方式
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://segmentfault.com/test", true);
xhr.send();
針對(duì)服務(wù)器代碼而言，需要設(shè)置Access-Control-Allow-Origin，顯式地列出源或使用通配符來匹配所有源。
優(yōu)點(diǎn)：
CORS支持所有類型的HTTP請(qǐng)求。
使用CORS，開發(fā)者可以使用普通的XMLHttpRequest發(fā)起請(qǐng)求和獲得數(shù)據(jù)
不足：
不能發(fā)送和接收cookie
更新：服務(wù)端可以通過設(shè)置Access-Control-Allow-Credentials該字段來表示是否允許發(fā)送Cookie。發(fā)送ajax請(qǐng)求時(shí)，需配置withCredentials屬性。(感謝sf小伙伴@lloyd_zhou 指正) 具體可查看 阮一峰大大的博客。
不能使用setRequestHeader()設(shè)置自定義頭部
兼容IE10+
postMessagepostMessge()是HTML5新定義的通信機(jī)制。所有主流瀏覽器都已實(shí)現(xiàn)。該API定義在Window對(duì)象。
otherWindow.postMessage(message, targetOrigin);
message: 要傳遞的消息。
targetOrigin: 指定目標(biāo)窗口的源。在發(fā)送消息的時(shí)候，如果目標(biāo)窗口的協(xié)議、主機(jī)地址或端口這三者的任意一項(xiàng)不匹配targetOrigin提供的值，那么消息就不會(huì)被發(fā)送；只有三者完全匹配，消息才會(huì)被發(fā)送。這個(gè)機(jī)制用來控制消息可以發(fā)送到哪些窗口；
當(dāng)源匹配時(shí)，調(diào)用postMessage()方法時(shí)，目標(biāo)窗口的Window對(duì)象會(huì)觸發(fā)一個(gè)message事件。在進(jìn)行監(jiān)聽事件時(shí)，應(yīng)先判斷origin屬性，忽略來自未知源的消息。
