前言：
AxIOS是一個(gè)來自于vue官方推薦的一個(gè)用于與后端（JAVA、go、Python、php）進(jìn)行數(shù)據(jù)交互的JavaScript庫，你可以通過axios庫快速高效的與后端進(jìn)行數(shù)據(jù)交互，是現(xiàn)文件上傳等復(fù)雜功能。
JavaScript庫：Axios
安裝Axios：
將命令提示符切換到項(xiàng)目目錄輸入"npm install vue-axios --save"進(jìn)行安裝，在安裝完畢后在main.js粘貼如下內(nèi)容：
import axios from 'axios'
Vue.prototype.$axios = axios
便完成安裝。
調(diào)用axios：
在安裝完畢之后可以直接參考axios官方文檔例子進(jìn)行調(diào)用，在官網(wǎng)的基礎(chǔ)上將axios替換成this.$axios即可完成調(diào)用。
例子：
簡(jiǎn)單請(qǐng)求：
this.$axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
編程式請(qǐng)求：
this.$axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' }});
所有的請(qǐng)求均完美支持axios官方Api，在原有api的基礎(chǔ)上只需要將axios替換為this.$axios，其他部分按照官方例子即可。
怎樣實(shí)現(xiàn)跨域：
什么是跨域：當(dāng)一個(gè)請(qǐng)求url的協(xié)議、域名、端口三者之間任意一個(gè)與當(dāng)前頁面url不同即為跨域。
在前端開發(fā)是解決跨域是需要前端與后端進(jìn)行共同解決的，特別實(shí)在調(diào)試開發(fā)階段前端配置跨域是非常重要且有必要的。
在配置跨域是需要vue.config.js+axios進(jìn)行聯(lián)合開發(fā)，從而實(shí)現(xiàn)前端的跨域能力，在后端沒有配置跨域的情況下與后端實(shí)現(xiàn)數(shù)據(jù)交互，加快開發(fā)進(jìn)度。
1、 vue.config.js（如沒有請(qǐng)?jiān)诟夸浶陆ǎ唧w代碼如下（可直接拷貝）：
2、 // Vue.config.js 配置選項(xiàng)
3、
4、 module.exports = {
5、 publicPath: "./",
6、 // 構(gòu)建時(shí)的輸出目錄
7、 outputDir: "dist",
8、 // 放置靜態(tài)資源的目錄
9、 assetsDir: "static",
10、 transpileDependencies: [ /* string or regex */ ],
11、 // 是否為生產(chǎn)環(huán)境構(gòu)建生成 source map？
12、 productionSourceMap: false,
13、 devServer: {
14、 open: true,
15、 host: 'localhost',
16、 port: 8080,
17、 https: false,
18、 //以上的ip和端口是我們本機(jī)的;下面為需要跨域的
19、 proxy: { //配置跨域
20、 '/ks': {
21、 target: 'http://search.kuwo.cn', //這里后臺(tái)的地址模擬的;應(yīng)該填寫你們真實(shí)的后臺(tái)接口
22、 ws: true,
23、 changOrigin: true, //允許跨域
24、 pathRewrite: {
25、 '^/ks': '' //請(qǐng)求的時(shí)候使用這個(gè)api就可以
26、 }
27、 },
28、 '/kp': {
29、 target: 'http://antiserver.kuwo.cn', //這里后臺(tái)的地址模擬的;應(yīng)該填寫你們真實(shí)的后臺(tái)接口
30、 ws: true,
31、 changOrigin: true, //允許跨域
32、 pathRewrite: {
33、 '^/kp': '' //請(qǐng)求的時(shí)候使用這個(gè)api就可以
34、 }
35、 }
36、 }
37、
38、 },
39、 }
2、怎樣進(jìn)行跨域調(diào)用：
在原有的axios開發(fā)的api基礎(chǔ)上在鏈接前增加pathRewrite的名稱如：
編程式請(qǐng)求：
this.$axios({ method: 'post', url: '/ks/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' }});
便可實(shí)現(xiàn)跨域的功能。
配置多個(gè)領(lǐng)域：
在我們實(shí)際的開發(fā)中往往需要調(diào)用開發(fā)的api鏈接可能不一樣（例如：圖片鏈接api是a.com、天氣鏈接是b.com），那么我們調(diào)試的時(shí)候需要配置兩個(gè)跨域。
示例代碼：
40、 module.exports = {
41、 publicPath: "./",
42、 // 構(gòu)建時(shí)的輸出目錄
43、 outputDir: "dist",
44、 // 放置靜態(tài)資源的目錄
45、 assetsDir: "static",
46、 transpileDependencies: [ /* string or regex */ ],
47、 // 是否為生產(chǎn)環(huán)境構(gòu)建生成 source map？
48、 productionSourceMap: false,
49、 devServer: {
50、 open: true,
51、 host: 'localhost',
52、 port: 8080,
53、 https: false,
54、 //以上的ip和端口是我們本機(jī)的;下面為需要跨域的
55、 proxy: { //配置跨域
56、 '/image: {
57、 target: 'http://a.com', //這里后臺(tái)的地址模擬的;應(yīng)該填寫你們真實(shí)的后臺(tái)接口
58、 ws: true,
59、 changOrigin: true, //允許跨域
60、 pathRewrite: {
61、 '^/image': '' //請(qǐng)求的時(shí)候使用這個(gè)api就可以
62、 }
63、 },
64、 '/wt': {
65、 target: 'http://antiserver.kuwo.cn', //這里后臺(tái)的地址模擬的;應(yīng)該填寫你們真實(shí)的后臺(tái)接口
66、 ws: true,
67、 changOrigin: true, //允許跨域
68、 pathRewrite: {
69、 '^/wt': '' //請(qǐng)求的時(shí)候使用這個(gè)api就可以
70、 }
71、 }
72、 }
73、
74、 },
75、 }
此時(shí)如果我們需要進(jìn)行跨域請(qǐng)求。
請(qǐng)求圖片：
this.$axios({ method: 'post', url: '/image/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' }});
請(qǐng)求天氣：
this.$axios({ method: 'post', url: '/wt/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' }});
注意：
1、 跨域配置指的是在本地運(yùn)行npm環(huán)境中跨域，在打包后還是需要服務(wù)器的支持和后端支持，直接打包上下并不會(huì)跨域。
2、 在配置多個(gè)跨域時(shí)請(qǐng)注意首位名字必須一致。
例子：
基于EuiAdmin+axios實(shí)現(xiàn)跨域與酷我音樂進(jìn)行交互，實(shí)現(xiàn)音樂播放器例子：
總結(jié)：
Vue集成axios為了能夠在與后臺(tái)實(shí)現(xiàn)數(shù)據(jù)交互，真正發(fā)揮前端的作用。實(shí)現(xiàn)前后端分離，構(gòu)建前后端數(shù)據(jù)交互的通道，你也可以前往euiadmin.com獲取源碼幫助您理解。
