摘要：瀏覽器的同源策略固然保障了互聯(lián)網(wǎng)世界的數(shù)據(jù)隱私與數(shù)據(jù)安全，但是如果當(dāng)我們需要使用跨域請(qǐng)求資源時(shí)，同源策略又會(huì)成為開(kāi)發(fā)者的阻礙。我們之前提到過(guò)，如果想要繞過(guò)瀏覽器同源策略，實(shí)現(xiàn)使用技術(shù)跨域獲取資源，需要服務(wù)端和客戶端的協(xié)同合作。

瀏覽器的“同源策略”固然保障了互聯(lián)網(wǎng)世界的數(shù)據(jù)隱私與數(shù)據(jù)安全，但是如果當(dāng)我們需要使用AJAX跨域請(qǐng)求資源時(shí)，“同源策略”又會(huì)成為開(kāi)發(fā)者的阻礙。在本文中，我們會(huì)簡(jiǎn)單介紹需要跨域請(qǐng)求資源的兩種情景，然后，詳細(xì)解釋目前主流的四種跨域請(qǐng)求資源方案。

讓我們開(kāi)始吧！

試想，當(dāng)我們擁有多個(gè)站點(diǎn)，并且這些站點(diǎn)又經(jīng)常共享相同的數(shù)據(jù)，那么為每個(gè)站點(diǎn)存儲(chǔ)一份數(shù)據(jù)看起來(lái)就蠢透了。更好的方案是，我們建設(shè)一臺(tái)靜態(tài)資源存儲(chǔ)服務(wù)器，然后讓我們的所有站點(diǎn)都從這一臺(tái)服務(wù)器上獲取資源。很理想的方案，但是現(xiàn)實(shí)中，我們首要解決的問(wèn)題便是瀏覽器的“同源策略”，別忘了，不同域之間無(wú)法通過(guò)AJAX技術(shù)獲取資源。這是需要跨域獲取資源的主要情景。

另外，站在互聯(lián)網(wǎng)“開(kāi)放，平等，自由”精神的角度上講，如果所有人的數(shù)據(jù)都被設(shè)置為只有同域才能訪問(wèn)，那么互聯(lián)網(wǎng)世界未免也太無(wú)聊了，如果我就是想要與更多的人分享我的數(shù)據(jù)，難道不應(yīng)該有辦法讓我做到這一點(diǎn)嗎？

當(dāng)然有辦法，下面我們就將一一解釋當(dāng)下主流的跨域請(qǐng)求資源方式。

我們將主要介紹以下四種跨域請(qǐng)求資源的方案，并逐一解釋他們的原理，實(shí)用方式以及優(yōu)缺點(diǎn)，希望你和我一樣有耐心，耐心總是能帶來(lái)回報(bào)：

野路子出身卻好用的方式：JSONP；

官方推薦的跨域資源共享方案：CORS；

使用HTML5 API：postMessage；

拋棄HTTP，使用：Web Sockets；

在開(kāi)始下面的內(nèi)容之前，我們首先需要強(qiáng)調(diào)一點(diǎn)，無(wú)論是怎樣的跨域資源獲取方案，本質(zhì)上都需要服務(wù)器端的支持?？缬颢@取資源之所以能夠成功，本質(zhì)是服務(wù)器默許了你有權(quán)限獲取相應(yīng)資源。下面我們所運(yùn)用的種種方式，實(shí)際上是客戶端和服務(wù)端互相配合，繞過(guò)同源策略進(jìn)行數(shù)據(jù)交互的工作，千萬(wàn)不要誤以為掌握了下述技術(shù)后，我們就能成為一個(gè)黑客 ???♂?。

正如標(biāo)題所描述的那樣，JSONP技術(shù)是早期某個(gè)(些?)聰明的程序員發(fā)明的跨域資源獲取方式，由于該技術(shù)的簡(jiǎn)單易用，逐漸變得越來(lái)越流行，最終成為經(jīng)典的跨域獲取資源方案。

JSONP是“JSON with padding”的簡(jiǎn)寫(xiě)，我將其翻譯為“被包裹的JSON”，當(dāng)你看完這個(gè)章節(jié)，你一定會(huì)覺(jué)得這個(gè)名字相當(dāng)貼切。

讓我們模擬一下當(dāng)初想到JSONP技術(shù)的高手程序員是如何推理的：

首先，我們應(yīng)該清楚的認(rèn)識(shí)到，瀏覽器的“同源策略”只是阻止了通過(guò)AJAX技術(shù)跨域獲取資源，而并沒(méi)有禁止跨域獲取資源這件事本身，正因如此，我們可以通過(guò)標(biāo)簽，標(biāo)簽以及

這意味著什么呢？這意味著被加載的文件與HTML文件下的其他JS文件共享一個(gè)全局作用域。也就是說(shuō)，標(biāo)簽加載到的資源是可以被全局作用域下的函數(shù)所使用的！