vue-resource中的jsonp跨域請求
阿新 • • 發佈：2019-02-01
jsonp的用法
jsonp請求主要是用來解決ajax跨域請求問題，使用jsonp實現跨域首先要保證伺服器api支援jsonp請求的格式。
寫法格式：
this.$http.jsonp('url',[可選引數，使用{}傳參]).then(成功回撥函式，失敗回撥函式);
jsonp跨域原理
由於當前頁面所在的域名為http://localhost:63342/而請求的api於此域名不同。根據瀏覽器的協議，不同域名下資訊資料的Ajax請求被認為是不安全的，因而瀏覽器會阻止這種方式的資料請求操作，故在跨域時，Ajax請求資料往往會導致失敗。
雖然瀏覽器會阻止Ajax的跨域請求，但根據瀏覽器的同源策略，其本身並不會阻止通過src
jsonp就是利用的此原理。
jsonp在請求後臺資料時，其本身就是在記憶體中建立一個
<script src="url"></script>
所以Ajax請求就設計了一種叫做jsonp的形式來封裝script指令碼的src形式來請求資料後再解析出資料。
jsonp要求伺服器支援一個引數callback=fn的引數傳遞，並且伺服器需要實現將返回的資料當做這個函式引數響應回來。
正因為如此，jsonp請求實際上並不是一個真正的Ajax請求，也就是說其請求的Content-Type並不是xhr非同步物件，而是一個script。
示例
原始碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router</title> </head> <body> <div id="app"> <ul> <li v-for="item in list">{{item.name}}</li> </ul> </div> <script src="../../../../js/vue/vue/1.0/vue.js"></script> <script src="../../../../js/vue/vue-resource/1.2.1/vue-resource.js"></script> <script type="application/javascript"> var vm = new Vue({ el:'#app' ,data:{ list:[] } ,created(){ this.getData(); } ,methods:{ getData(){ var url = 'http://localhost:3000/people'; this.$http.jsonp(url).then(function(res){ if(!res.ok){ alert('請求出錯！'); } this.list = res.body; }); } } }); </script> </body> </html>
執行結果
分析
雖然上面的示例中引用的仍然是本地的http://localhost，而並非是真實的跨域，但是這不影響這個程式的使用，實際上跨域也是這麼寫的，寫法一模一樣。
我們知道，跨域是因為其請求的頭部Content-Type是一個script，因而當我們看到該資訊時，說明其就是能夠實現跨域的功能。
如下所示：
