本人小白一枚，網(wǎng)上關(guān)于jsonp跨域的博文和回答實(shí)在是太多了，看到好多種？？jsonp的方式，并沒(méi)有一一去嘗試，可能原理都相同吧，還沒(méi)有做深入了解，只是先記錄一下我所掌握的jsonp解決跨域的方法，希望和我一樣看的頭暈眼花的小伙伴能有所收獲~
1 同源策略
要理解跨域，先要了解“同源策略”，所謂同源是指，域名，協(xié)議，端口相同。所謂“同源策略”，簡(jiǎn)單的說(shuō)就是基于安全考慮，當(dāng)前域不能訪問(wèn)其他域的東西。
一些常見(jiàn)的是否同源示例可參照下表：
在同源策略下，在某個(gè)服務(wù)器下的頁(yè)面是無(wú)法獲取到該服務(wù)器以外的數(shù)據(jù)的。例如我們?cè)谧约旱木W(wǎng)站通過(guò)ajax去獲取豆瓣提供的接口數(shù)據(jù)。即使是訪問(wèn)本地非JS文件的文件（比如.json文件）.
不過(guò)火狐可以正常讀取到，原因是：雖然允許跨域很不安全，但是如果不跨域的話又帶來(lái)很多不便，所以火狐是允許跨域的。
為什么谷歌獲取不到？
這里要提到一點(diǎn)，訪問(wèn)本地計(jì)算機(jī)中的文件，使用的是file協(xié)議，file協(xié)議主要用來(lái)訪問(wèn)本地計(jì)算機(jī)中的文件，就如同在windows資源管理器中打開(kāi)文件一樣，注意它是針對(duì)本地（本機(jī)）的，簡(jiǎn)單來(lái)說(shuō)，file協(xié)議是訪問(wèn)你本機(jī)的文件資源。
谷歌的報(bào)錯(cuò)可以在控制臺(tái)明顯看到：
Cross origin requests are only supported for protocol schemes:http，data，chrome，chrome-extension，https
實(shí)質(zhì)上就是安全機(jī)制認(rèn)為加載本地其他文件是跨域行為。谷歌瀏覽器會(huì)跨域失敗，是因?yàn)闉g覽器安全機(jī)制不允許。
為什么谷歌不支持跨域？
這是因?yàn)闉g覽器的安全策略，即禁止ajax訪問(wèn)本地的文件，這是不安全也是不允許的，舉例的話，就相當(dāng)于你訪問(wèn)了一個(gè)網(wǎng)站，這個(gè)網(wǎng)站可以讀取到你本地的文件.......
2 跨域問(wèn)題
Chrome真的很?chē)?yán)格，對(duì)于Chrome來(lái)說(shuō)，訪問(wèn)本地非js文件或者非同源地址都屬于跨域行為，而火狐可以訪問(wèn)本地文件，但是訪問(wèn)非同源地址時(shí)還是跨域的行為。
這類(lèi)問(wèn)題統(tǒng)稱(chēng)為跨域問(wèn)題。
3 JSON
JSON是一種數(shù)據(jù)存儲(chǔ)格式，不懂得朋友可以自行百度一下~
3 JSONP的原理
JSONP是JSON的一種“使用模式”，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問(wèn)的問(wèn)題，利用<script>元素的開(kāi)放策略，網(wǎng)頁(yè)可以得到從其他來(lái)源動(dòng)態(tài)產(chǎn)生的JSON資料，而這種使用模式就是所謂的JSONP。用JSONP抓到的資料并不是JSON，而是任意的JAVAScript，用javascript直譯器執(zhí)行而不是用JSON解析器解析。
動(dòng)態(tài)創(chuàng)建<script>標(biāo)簽，設(shè)置其src，回調(diào)函數(shù)也在src中設(shè)置，例如：
<script src="(http://....其他域地址)/(文件地址)?(可以寫(xiě)查詢(xún)內(nèi)容)&(callback=(回調(diào)函數(shù)的名稱(chēng)))"> || <script src="index.json?callback=indexDemo"> 或者 <script src="https://api.douban.com/va/book/search?q=javascript&count=1&callback=handleResponse">
在頁(yè)面中，返回的JSON作為參數(shù)傳入回調(diào)函數(shù)中，我們通過(guò)回調(diào)函數(shù)來(lái)操作數(shù)據(jù)。
這里需要注意的是，JSON文件中的數(shù)據(jù)格式如下：
這里json數(shù)據(jù)前面的名稱(chēng)要和第一條script標(biāo)簽中的callback里的函數(shù)名稱(chēng)一樣 indexDemo({ "hello":"bye" })
用過(guò)該方法的朋友會(huì)發(fā)現(xiàn)JSON文件會(huì)報(bào)錯(cuò)，先別著急否定這個(gè)方法，先讀一遍下面這段話~（詭異臉）
根據(jù)上述過(guò)程總結(jié)的話，JSONP的原理如下：
- 首先在客戶(hù)端注冊(cè)一個(gè)callback，然后把callback的名字傳給服務(wù)器。
- 此時(shí)服務(wù)器先生成JSON數(shù)據(jù)
- 然后以JS語(yǔ)法的方式，生成一個(gè)function，function名字就是傳遞上來(lái)的參數(shù)jsonp
- 最后將json數(shù)據(jù)直接以入?yún)⒌姆绞?，放置到function中，這樣就生成了一段Js語(yǔ)法的文檔，返回給客戶(hù)端。
- 客戶(hù)端瀏覽器，解析script標(biāo)簽，并執(zhí)行返回的Js文檔，此時(shí)數(shù)據(jù)作為參數(shù)，傳入到了客戶(hù)端預(yù)先定義好的callback函數(shù)里。
看到這里，會(huì)不會(huì)有一種煥然大悟的感覺(jué)~原來(lái).json文件中放置的是一個(gè)函數(shù)，只有是函數(shù)，才可以將json數(shù)據(jù)以入?yún)⒌姆绞?，放置到function中。
4 JSONP的優(yōu)缺點(diǎn)
優(yōu)點(diǎn)
- 比XML輕了很多，沒(méi)有那么多冗余的東西。
- JSON具有很好的可讀性，但是通常返回的都是壓縮過(guò)后的，不像XML這樣的瀏覽器可以直接顯示，瀏覽器對(duì)于JSON的格式化顯示就需要借助一些插件了。
- 在JS中處理JSON很簡(jiǎn)單
- 其他語(yǔ)言，例如PHP對(duì)于JSON的支持也不錯(cuò)
缺點(diǎn)
- JSON在服務(wù)端語(yǔ)言的支持不像XML那么廣泛，不過(guò)JSON.org上提供很多語(yǔ)言的庫(kù)（我并不懂這句話，以后再做研究）
- 如果你使用eval（）來(lái)解析的話，會(huì)容易出現(xiàn)安全問(wèn)題（依舊不懂，以后遇到再來(lái)補(bǔ)充~）
5 補(bǔ)充
JSONP是很強(qiáng)大的，但不是所有跨域通信需求的萬(wàn)靈藥，還是建議可以學(xué)會(huì)使用node或其他后端語(yǔ)言來(lái)配合完成跨域的方法~（雖然我也還沒(méi)學(xué)會(huì)，學(xué)會(huì)就會(huì)更新在博客里）
第一，也是最重要的一點(diǎn)，沒(méi)有關(guān)于JSONP調(diào)用的錯(cuò)誤處理，如果動(dòng)態(tài)腳本插入有效，就執(zhí)行調(diào)用；如果無(wú)效，就靜默失敗。失敗是沒(méi)有任何提示的，服務(wù)器既不會(huì)捕捉到404錯(cuò)誤，也不會(huì)取消或者重新開(kāi)始請(qǐng)求。
第二，被不信任的服務(wù)使用時(shí)會(huì)很危險(xiǎn)，因?yàn)镴SONP服務(wù)返回打包在函數(shù)調(diào)用中的JSON相應(yīng)，而函數(shù)調(diào)用是由瀏覽器執(zhí)行的，這使宿主web應(yīng)用程序更容易受到各類(lèi)攻擊，如果打算使用JSONP服務(wù)，了解它能造成的威脅非常重要。
參考網(wǎng)址
輕松搞定JSONP跨域請(qǐng)求
AJAX跨域請(qǐng)求—JSONP獲取JSON數(shù)據(jù)
