第一種：vue-resource
? ? ?腳手架中安裝命令：npm install vue-resource --save
? ? ?在main.js中引入vue-resource
? ? ? ? ? import vueResource from 'vue-resource'
? ? ? ? ? Vue.use(vueResource)
? ? ?渲染數(shù)據(jù)：
? ? ? ? ? get和jsonp
? ? ? ? ? This.$http.get（“地址”）.then（（res）=>{
? ? ? ? ? ? ? ?成功回調(diào)函數(shù)
? ? ? ? ? }抒倚，（error）=>{
? ? ? ? ? ? ? ?失敗回調(diào)函數(shù)
? ? ? ? ? }）
第二種：axios
? ? ?腳手架中安裝命令：npm install axios --save
? ? ?先引入
? ? ? ? ? main.js中引入
? ? ? ? ? ? ? ?import Axios from‘a(chǎn)xios’
? ? ? ? ? ? ? ?Vue.prototype.axios = Axios
? ? ?渲染數(shù)據(jù)
? ? ? ? ? this.axios.get('地址').then(function (response) {
? ? ? ? ? ? ? ?console.log(response);
? ? ? ? ? }).catch(function (error) {
? ? ? ? ? ? ? ?console.log(error);
? ? ? ? ? })
注：
一撰豺、跨域的幾種情況
1.協(xié)議不同
http://www.baidu.com
https://www.baidu.com
2.端口不同
http://www.baidu.com:80
http://www.baidu.com:8888
3.主域不同
http://www.baidu.com
http://www.sohu.com
4.子域不同颊乘，主域相同
http://image.baidu.com
http://news.baidu.com
5.域名和IP
http://www.baidu.com
http://61.135.169.121/aaa.php
http://www.baidu.com/aa/aa.php
http://www.baidu.com/bb/bb.php
二掀虎、jsonp實(shí)現(xiàn)原理
動(dòng)態(tài)創(chuàng)建script，傳遞callback函數(shù)給后端汽抚，后端接收callback喇完，返回函數(shù)調(diào)用檀轨，實(shí)參為json
? ? ? <script src="aa.php?callback=render"></script>
? ? ? ?function render () {
? ? ? ?}
三蒙谓、利用webpack代理方式跨域
在config----->index.js文件里面
proxyTable: {
? ? ?"/v2":{
? ? ? ? ? target:"https://api.douban.com",
? ? ? ? ? changeOrigin:true,? ? --是否跨域
? ? ? ? ? pathRewrite:{
? ? ? ? ? ? ? ?"^/v2":"/v2"
? ? ? ? ? }
? ? ?}
}
