JSONP 是一種 JSON 的使用方式, 這里的P 可以理解為 Padding 的意思.
為什么要用 JSONP 呢? 或者說(shuō) JSONP 一般會(huì)在什么地方應(yīng)用呢?
先來(lái)看一個(gè)報(bào)錯(cuò)信息
這是一個(gè)經(jīng)典的跨域報(bào)錯(cuò), 關(guān)于跨域詳看 瀏覽器同源策略 .
此處的報(bào)錯(cuò)原因是 9999 端口想要訪問(wèn) 8080 端口的數(shù)據(jù)，違背了該策略。
JSONP 就是這樣一種方式， 能繞過(guò)這種策略红省。具體實(shí)現(xiàn)是利用了 script 腳本天生的跨域能力懒熙。
比如在你的頁(yè)面里面引入這個(gè)腳本 https://cdn.bootcss.com/lodash.js/4.17.15/lodash.core.min.js 只要你的瀏覽器允許 js 腳本運(yùn)行就行蔽挠。因?yàn)樗械哪_本的引入都是 get 的方式盒蟆， 所以注定了 JSONP 的請(qǐng)求只能是 get 請(qǐng)求.
具體是怎么應(yīng)用的呢?
首先是前端
axios({
url: "http://localhost:8080/getJson"
}).then(res => {
})
這是我們正常請(qǐng)求時(shí)候的代碼接奈，因?yàn)榭缬颍?所以我們就不能這么用了咐柜。
/getJson 這個(gè)接口返回的數(shù)據(jù)應(yīng)該是這樣的
{"url": "login"}
寫(xiě)一個(gè)全局的JSONP處理方法
window.JSON_P = function (res) {
console.log(res)
//
}
調(diào)用 JSONP 腳本
<script src="http://localhost:8080/getJson?callback=JSON_P"></script>
后端
后端接收到 script 腳本之后會(huì)解析將你定義的全局方法解析出來(lái)兼蜈， 然后將數(shù)據(jù)包進(jìn)方法里面返回
JSON_P&&JSON_P({"url": "login"})
其實(shí)這里可以看出來(lái)： 后端返回的 script 腳本內(nèi)容其實(shí)是一個(gè)巨大的函數(shù)調(diào)用， 調(diào)用的參數(shù)就是我們需要的數(shù)據(jù)拙友。外層包裹方法相當(dāng)于 JSONP 里面的 P为狸，函數(shù)的名字是通過(guò)腳本的 query 查找的，算是前后端的一種約定方式遗契。
因?yàn)槲覀兊姆椒ㄊ菍?xiě)到全局里面的辐棒， 所以這個(gè)腳本一旦插入到頁(yè)面里面就相當(dāng)于執(zhí)行了該方法， 在方法的執(zhí)行里面我們就能對(duì)數(shù)據(jù)進(jìn)行操作了~
注意 JSONP 不是 Ajax 調(diào)用牍蜂， 在 Chrome 瀏覽器 Network 面板的 XHR 無(wú)法看到漾根， 要在 JS 里面查看
