最近在學(xué)習(xí)vue.js 碰到個(gè)ajax跨域請(qǐng)求的問(wèn)題，之前知道可以用jsonp解決，但是一直沒(méi)實(shí)踐過(guò)，這次用發(fā)現(xiàn)里面好多問(wèn)題，所以現(xiàn)在記錄下來(lái)，希望可以給剛接觸使用jsonp的同學(xué)一點(diǎn)幫助！

關(guān)于什么是jsonp，以及為什么要用jsonp我就不多說(shuō)了，不明白的同學(xué)自行百度一下。

我們先來(lái)說(shuō)一下jQuery里面的jsonp請(qǐng)求，這搞懂了 vue-resource 里面的jsonp就容易明白了。

這里我以json數(shù)據(jù)為例，首先我們通過(guò)?$.get可以直接得到一個(gè)我們想要的對(duì)象，但是用 jsonp 就會(huì)出現(xiàn)報(bào)錯(cuò)代碼如下，

$.ajax({url:"http://192.168.8.59/weixinvip/VIP/ERP/Home/api.ashx?a=getwxativity&i=1",type:"GET",dataType:"jsonp",sccuess:function(data){console.log(data)} })

這時(shí)候我們看到控制臺(tái)并沒(méi)有如我們所愿，輸出data數(shù)據(jù)，而是報(bào)錯(cuò)了。

這個(gè)時(shí)候我們查看Network，看到實(shí)際上已經(jīng)請(qǐng)求到了數(shù)據(jù)?

我們可以看到請(qǐng)求成功了，狀態(tài)碼200，數(shù)據(jù)也返回了，但是為什么還是報(bào)錯(cuò)了呢？ 這就要我們分析下jsonp的原理了：

• 首先在發(fā)送ajax的時(shí)候，正常我們是拿到了一段json數(shù)據(jù)，但是JS是不方便直接操作json數(shù)據(jù)的，這個(gè)時(shí)候jQuery已經(jīng)自動(dòng)幫我們解析成了一個(gè)JS對(duì)象；
• 我們都知道jsonp實(shí)際上是相當(dāng)于用JavaScript加載腳本的方式將數(shù)據(jù)加載進(jìn)來(lái)的

說(shuō)到這里我想有些同學(xué)大概已經(jīng)明白為什么會(huì)報(bào)錯(cuò)了，其實(shí)這個(gè)時(shí)候就是直接在頁(yè)面中加入了一段script，里面的內(nèi)容就是返回給我們的數(shù)據(jù)

<script src="http://192.168.8.59/weixinvip/VIP/ERP/Home/api.ashx?a=getwxativity&i=1"></script>

現(xiàn)在我們?cè)賮?lái)想想，這段JavaScript代碼，其實(shí)就是一段沒(méi)有意義的對(duì)象了，因?yàn)闆](méi)有將它賦值個(gè)一個(gè)變量，你是無(wú)法拿到；所以這個(gè)時(shí)候我們就需要后臺(tái)同事的配合了，我相信說(shuō)到這里，大家應(yīng)該都明白怎么做了，所以jQuery的ajax我們就不多說(shuō)了。

今天我們主要是說(shuō)一下vue-resource 里面的jsonp跨域請(qǐng)求問(wèn)題

• 閑話不多說(shuō)，直接上代碼：

var vm = new Vue({el:'#signRecord',data:{},beforeMount:function(){this.$http.jsonp("http://192.168.8.59/weixinvip/VIP/ERP/Home/api.ashx?a=getwxativity&i=1").then(function(data){console.log(data)})} })

同樣報(bào)錯(cuò)了，而且vue-resource還多給我們報(bào)了一個(gè)錯(cuò)，我們?cè)賮?lái)看看network

同樣請(qǐng)求成功，數(shù)據(jù)也拿到了，但是就是報(bào)錯(cuò)。我們注意看一下請(qǐng)求頭，會(huì)發(fā)現(xiàn)多了一個(gè)參數(shù)

?

這個(gè)參數(shù)是干嘛的呢？我們看看源碼

這里我們可以看到，實(shí)際上callback是隨機(jī)生成的字符串，并且這個(gè)參數(shù)名我們也可以自己給他命名，如果沒(méi)指定，默認(rèn)是“callback”,既然 默認(rèn)傳遞的參數(shù)，那就肯定是有用的。 其實(shí)vue發(fā)送jsonp還有兩個(gè)參數(shù)，我們來(lái)看看 Vue.http.jsonp(url,{params: {pageID:29},jsonp:"_callback"}) //這步就是關(guān)鍵，改callback名 這里params是要發(fā)送的數(shù)據(jù)對(duì)象，jsonp是設(shè)置回調(diào)的名稱，也就是上面的callback名稱；（不設(shè)置默認(rèn)為callback），現(xiàn)在我們就需要 后臺(tái)協(xié)助一下，獲取我們發(fā)送過(guò)去的"_callpack"的值，將這個(gè)值拼接到返回的json數(shù)據(jù)上，這時(shí)候就可以了！

總結(jié)

以上是生活随笔為你收集整理的vue-resource jsonp跨域问题解决方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。