在前后端分離的開發(fā)模式下，前端頁面需要向后端發(fā)送請(qǐng)求獲取數(shù)據(jù)。然而，由于同源策略的限制，當(dāng)請(qǐng)求的URL與當(dāng)前頁面的URL不同時(shí)，瀏覽器會(huì)阻止該請(qǐng)求，即會(huì)出現(xiàn)跨域問題。

JSONP（JSON with Padding）是一種跨域解決方案。它利用了script標(biāo)簽的跨域能力，將請(qǐng)求的數(shù)據(jù)封裝在一個(gè)函數(shù)中返回，并通過script標(biāo)簽的src屬性引用該函數(shù)，達(dá)到跨域獲取數(shù)據(jù)的目的。

function jsonp(url, callback) {
let jsonpScript = document.createElement('script');
jsonpScript.src = url + '&callback=' + callback;
document.body.appendChild(jsonpScript);
}
jsonp('http://www.example.com/data', 'jsonpCallback')
//服務(wù)端返回的數(shù)據(jù)格式：
jsonpCallback({'name':'張三', 'age':18})

以上是一個(gè)簡(jiǎn)單的JSONP實(shí)現(xiàn)代碼。通過動(dòng)態(tài)創(chuàng)建script標(biāo)簽，并將獲取數(shù)據(jù)的URL和回調(diào)函數(shù)名拼接在一起，同時(shí)將其添加到body標(biāo)簽中。服務(wù)端返回的數(shù)據(jù)需要滿足將返回?cái)?shù)據(jù)封裝在回調(diào)函數(shù)中的格式要求。

在Vue中使用JSONP可以使用第三方庫(kù)jsonp或vue-jsonp，這里以vue-jsonp為例：

//安裝
npm install vue-jsonp --save
//引入
import Vue from 'vue'
import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)
//使用
this.$jsonp('http://www.example.com/data', {callbackName: 'jsonpCallback'}).then(function(response){
console.log(response)
}).catch(function(error){
console.log(error)
})

使用vue-jsonp使得JSONP的使用變得更加便捷。在原生JSONP的基礎(chǔ)上，添加了promise和失敗回調(diào)函數(shù)的功能。同時(shí)，JSONP的缺點(diǎn)也需要牢記，即提供的API接口有風(fēng)險(xiǎn)，有可能會(huì)遭受到XSS攻擊，需要謹(jǐn)慎使用。