Vue用axios跨域訪問數據

Vue用axios跨域訪問數據
axios是vue-resource的替代品，vue-resource再也不維護。
安裝axios：npm install axios
使用vue-cli開發時，因爲項目自己啓動本地服務是須要佔用一個端口的，因此會產生跨域的問題。在使用webpack作構建工具的項目中,使用proxyTable代理實現跨域是一種比較方便的選擇。

經過this.$http去調用axios，若是以前你的vue-resourse也是這麼寫的話，能夠無縫切換。換成this.axios也是沒有問題的。

proxyTable相關配置及使用說明：
在config/index.js文件中，找到dev對象下proxyTable對象進行跨域設置，配置以下：
dev: {
env: require('./dev.env'),
host: 'localhost',
port: 8088,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'https://api.douban.com/v2/movie/',//設置你調用的接口域名和端口號 別忘了加http、https
changeOrigin: true,//是否跨域
secure: true, // 容許https請求
pathRewrite: {
'^/api': ''//這裏理解成用‘/api’代替target裏面的地址
}
}
},
--------------------
axios請求不攜帶cookie
this.axios.defaults.withCredentials = true;// 跨域攜帶cookie
在跨域的狀況下不只前端要設置withCredentials，後端也是要設置Access-Control-Allow-Credentials的。
this.$http.post(this.$store.state.apis + "/index/index/getToken",qs.stringify({})).then( res => {
this.axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
this.axios.defaults.headers.post['token'] = res.data.data.token;
this.axios.defaults.withCredentials = true;// 跨域攜帶cookie
})
==================
main.js
/*ajax請求*/
import axios from 'axios'
axios.defaults.baseURL = '/api'//https://api.douban.com/v2/movie 改爲/api才能用proxyTable跨域
Vue.prototype.$ajax = axios

--------------------
proxyTable配置的意思爲：使用字符串"/api"來代替目標接口域名；若是接口地址爲"user/getUserInfo",咱們能夠在全部的接口地址前面加上"/api/"用於設置代理；如:
'http://localhost:8080/api/user/getUserInfo' ===> 'http://www.abc.com/api/user/getUserInfo'
若是你不想每次請求地址中都帶有"/api/",則能夠設置
pathRewrite: {
'^/api': '' // 後面可使重寫的新路徑，通常不作更改
}
表現結果爲：
'http://localhost:8080/api/user/getUserInfo' ===> 'http://www.abc.com/user/getUserInfo'
另一種狀況是，咱們不須要在每一個接口地址前添加"/api/",只須要用接口自己的地址，不須要從新路徑便可。若是接口爲："/v2/cotton/get_app_list",使用"/v2"作代理；以下：
dev: {
proxyTable: {
'/v2': {
target: 'http://www.abc.com', //目標接口域名
changeOrigin: true, //是否跨域
secure: false, // 容許https請求
// 這裏去掉了從新設置新路徑，由於接口地址自己就是以"/v2/"開頭的；
}
}
'http://localhost:8080/v2/cotton/get_app_list' ===> 'http://www.abc.com/v2/cotton/get_app_list'
// http://localhost:8080/v2表示http://www.abc.com
默認狀況下，不接受運行在 HTTPS 上，且使用了無效證書的後端服務器。若是你想要接受，修改配置以下：
proxy: {
"/api": {
target: "https://www.abc.com",
secure: false
}
}
========================

2：在須要調接口的組件中這樣使用：
axios.post('/api/yt_api/login/doLogin',postData)
.then(function (response) {
console.log(1)
console.log(response);
})
.catch(function (error) {
console.log(error);
})

注意：原接口：http://http://121.41.130.58:9090/yt_api/login/doLogin
頁面調用：http://localhost:8081/api/yt_api/login/doLogin ——這裏多了一個/api/不是多餘的，不要刪

二：axios傳參
1：Vue官方推薦組件axios默認就是提交 JSON 字符串，因此咱們要以json字符串直接拼接在url後面的形式，直接將json對象傳進去就好了
let postData = {
　　companyCode:'zdz',
　　userName:'123456789123456789',
　　password:'123456'
}
axios.get('/api/yt_api/login/doLogin',{
　　params: {
　　　　...postData,
　　}
})
.then(function (response) {
　　console.log(response);
})
.catch(function (error) {
　　console.log(error);
});

這裏咱們將postData這個json對象傳入到post方法中

2：以key：val的形式傳參
(1).安裝qs:npm install qs
(2).對這個json對象操做
let postData = qs.stringify({
companyCode:'zdz',
userName:'123456789123456789',
password:'123456'
})
(3).再導入
import qs from 'qs'