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
,因而當我們看到該資訊時,說明其就是能夠實現跨域的功能。
如下所示: