Vue中使用JSONP傳參可以實(shí)現(xiàn)跨域請(qǐng)求數(shù)據(jù)的功能，JSONP的基本原理是通過(guò)動(dòng)態(tài)創(chuàng)建script標(biāo)簽，請(qǐng)求的URL路徑中包含callback參數(shù)，服務(wù)端接收到請(qǐng)求后將數(shù)據(jù)返回并將數(shù)據(jù)作為參數(shù)傳遞給callback函數(shù)并且將函數(shù)體拼接到script標(biāo)簽中返回給前端進(jìn)行處理。

<template>
<div></div>
</template>
<script>
export default {
data() {
return {
jsonData: {}
}
},
methods: {
getData() {
const script = document.createElement('script')
const callbackName = 'callback' + Math.random().toString(36).substr(2)
script.src = 'http://localhost:3000/jsonp?callback=' + callbackName
document.head.appendChild(script)
window[callbackName] = (jsonData) => {
this.jsonData = jsonData
}
document.head.removeChild(script)
}
}
}
</script>

上面的代碼中我們創(chuàng)建了一個(gè)函數(shù)getData()，在該函數(shù)中首先創(chuàng)建了一個(gè)script元素，然后添加了callback參數(shù)，回調(diào)函數(shù)名是動(dòng)態(tài)生成的，接著將script添加到head標(biāo)簽中，等待服務(wù)端的響應(yīng)，服務(wù)端返回的數(shù)據(jù)會(huì)作為回調(diào)函數(shù)的參數(shù)傳遞給前端代碼，我們將數(shù)據(jù)賦值給組件的jsonData屬性，最后移除添加的script標(biāo)簽，避免頁(yè)面發(fā)生冗余代碼。

需要注意的是服務(wù)端返回的數(shù)據(jù)只能是純文本數(shù)據(jù)，也就是說(shuō)服務(wù)端返回的數(shù)據(jù)格式“application/json”對(duì)于JSONP來(lái)說(shuō)是不合法的因?yàn)榭缬蛸Y源共享（CORS）機(jī)制中ContentType支持的值不包括這個(gè)格式，所以服務(wù)端返回的數(shù)據(jù)必須是可以執(zhí)行的JavaScript代碼，也就是回調(diào)函數(shù)的形式才能正常運(yùn)行。

使用JSONP的優(yōu)點(diǎn)是跨域請(qǐng)求數(shù)據(jù)不受限制，對(duì)于移動(dòng)端同樣適用，而且性能較高，缺點(diǎn)是安全性不高，因?yàn)榉?wù)端不能判斷請(qǐng)求來(lái)源，容易被一些惡意攻擊者利用，而且JSONP同樣也不支持POST請(qǐng)求，只能通過(guò)GET方法發(fā)送請(qǐng)求。