[[171703]]

前言

轉(zhuǎn)眼就是秋招季啦。經(jīng)歷了幾場(chǎng)筆試面試，屢次被問(wèn)到關(guān)于如何實(shí)現(xiàn)跨域。老實(shí)說(shuō)，之前都是紙上談兵，也沒(méi)有項(xiàng)目需要跨域，甚至覺(jué)得這個(gè)東西沒(méi)什么意義。直到今天項(xiàng)目中遇到了跨域問(wèn)題，看了不少資料才理解跨域的普遍性和意義。特寫(xiě)此篇文章整理自己所得。

轉(zhuǎn)自個(gè)人博客: 關(guān)于跨域

什么是跨域

一般來(lái)說(shuō)，如果你在開(kāi)發(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.

同源策略

說(shuō)到跨域就不得不提“同源策略”。

同源策略是Web瀏覽器針對(duì)惡意的代碼所進(jìn)行的措施，為了防止世界被破壞，為了保護(hù)世界的和平，Web瀏覽器，采取了同源策略，只允許腳本讀取和所屬文檔來(lái)源相同的窗口和文檔的屬性。

那么，怎么判斷文檔來(lái)源是否相同呢?很簡(jiǎn)單，看三個(gè)部分： 協(xié)議、主機(jī)、端口號(hào)。只要其中一個(gè)部分不同，則不同源。

跨域的應(yīng)用場(chǎng)景

1. 來(lái)自 home.example.com 的文檔里的腳本讀取 developer.example.com載入的文檔的屬性。
2. 來(lái)自 home.example.com 的文檔里的腳本讀取 text.segmentfault.com載入的文檔的屬性。

如何跨域

設(shè)置domain屬性

針對(duì)上述應(yīng)用場(chǎ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ù)。

原理：通過(guò)動(dòng)態(tài)<script>元素來(lái)使用，可以通過(guò)src屬性指定一個(gè)跨域URL。

function handler(data){ 
    console.log(data); 
} 
 
var script = document.createElement("script"); 
script.src = "https://segmentfault.com/json/?callback=handler"; 
document.body.insertBefore(script, document.body.firstChild);  

除此之外，還可以利用jQuery來(lái)實(shí)現(xiàn)。 

function jsonCallback(json){ 
  console.log(json); 
} 
 
$.ajax({ 
  url: "http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-2.json", 
  dataType: "jsonp" 
}); 

 運(yùn)行結(jié)果如下：

某些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):

1. 兼容性強(qiáng)。
2. 簡(jiǎn)單易用，能之間訪問(wèn)響應(yīng)文本，支持瀏覽器與服務(wù)器之間雙向通信。

不足：

1. 只能用GET方法，不能使用POST方法
2. 無(wú)法判斷請(qǐng)求是否失敗，沒(méi)有錯(cuò)誤處理。

跨域資源共享CORS

需要瀏覽器和服務(wù)器同時(shí)支持。

原理：使用"Origin:"請(qǐng)求頭和"Access-Control-Allow-Origin"響應(yīng)頭來(lái)擴(kuò)展HTTP。其實(shí)就是利用新的HTTP頭部來(lái)進(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，顯式地列出源或使用通配符來(lái)匹配所有源。

優(yōu)點(diǎn)：

1. CORS支持所有類型的HTTP請(qǐng)求。
2. 使用CORS，開(kāi)發(fā)者可以使用普通的XMLHttpRequest發(fā)起請(qǐng)求和獲得數(shù)據(jù)

不足：

1. 不能發(fā)送和接收cookie

更新：服務(wù)端可以通過(guò)設(shè)置Access-Control-Allow-Credentials該字段來(lái)表示是否允許發(fā)送Cookie。發(fā)送ajax請(qǐng)求時(shí)，需配置withCredentials屬性。(感謝sf小伙伴@lloyd_zhou 指正)

具體可查看 阮一峰大大的博客。

1. 不能使用setRequestHeader()設(shè)置自定義頭部
2. 兼容IE10+

postMessage

postMessge()是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ī)制用來(lái)控制消息可以發(fā)送到哪些窗口;

當(dāng)源匹配時(shí)，調(diào)用postMessage()方法時(shí)，目標(biāo)窗口的Window對(duì)象會(huì)觸發(fā)一個(gè)message事件。在進(jìn)行監(jiān)聽(tīng)事件時(shí)，應(yīng)先判斷origin屬性，忽略來(lái)自未知源的消息。 

//<http://example.com:8080>上的腳本: 
var popup = window.open(...popup details...); 
popup.postMessage("The user is 'bob' and the password is 'secret'", 
              "https://secure.example.net");   
popup.postMessage("hello there!", "http://example.org"); 
 
function receiveMessage(event) 
{ 
  if (event.origin !== "http://example.org") 
    return; 
  // event.source is popup 
  // event.data is "hi there yourself!  the secret response is: rheeeeet!"【見(jiàn)下面一段代碼可知】 
} 
window.addEventListener("message", receiveMessage, false);  

針對(duì)上面的腳本進(jìn)行接受數(shù)據(jù)的操作： 

/* 
 * popup的腳本，運(yùn)行在<http://example.org>: 
 */ 
 
//當(dāng)postMessage后觸發(fā)的監(jiān)聽(tīng)事件 
function receiveMessage(event) 
{ 
  //先判斷源 
  if (event.origin !== "http://example.com:8080") 
    return; 
 
  // event.source：window.opener 
  // event.data："hello there!" 
 
  event.source.postMessage("hi there yourself!  the secret response " + 
                           "is: rheeeeet!", 
                           event.origin); 
} 
 
window.addEventListener("message", receiveMessage, false);  

后續(xù)

收到了很多小伙伴的建議和指正，不勝感激，我會(huì)慢慢豐富這篇文章的內(nèi)容的。請(qǐng)多多指教~

參考文章

• 前端跨域請(qǐng)求原理及實(shí)踐
• Window.postMessage()|MDN
• 老生常談的跨域處理
• JavaScript跨域問(wèn)題總結(jié)
• 實(shí)現(xiàn)跨域的幾種方式
• jQuery’s JSONP Explained with Examples