建站
咨詢
售后
建站咨詢
新聞中心
本篇內(nèi)容介紹了“怎么實現(xiàn)Vue集成Axios、調(diào)用、跨域、配置多個跨域”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！
創(chuàng)新互聯(lián)專注于企業(yè)營銷型網(wǎng)站、網(wǎng)站重做改版、彌勒網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5、購物商城網(wǎng)站建設(shè)、集團公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為彌勒等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
前言：
Axios是一個來自于vue官方推薦的一個用于與后端(Java、go、Python、PHP)進行數(shù)據(jù)交互的JavaScript庫，你可以通過axios庫快速高效的與后端進行數(shù)據(jù)交互，是現(xiàn)文件上傳等復(fù)雜功能。
JavaScript庫：Axios
安裝Axios：
將命令提示符切換到項目目錄輸入"npm install vue-axios --save"進行安裝，在安裝完畢后在main.js粘貼如下內(nèi)容：
import axios from 'axios' Vue.prototype.$axios = axios
便完成安裝。
調(diào)用axios：
在安裝完畢之后可以直接參考axios官方文檔例子進行調(diào)用，在官網(wǎng)的基礎(chǔ)上將axios替換成this.$axios即可完成調(diào)用。
例子：
簡單請求：
this.$axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });編程式請求：
this.$axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' }});所有的請求均完美支持axios官方Api，在原有api的基礎(chǔ)上只需要將axios替換為this.$axios，其他部分按照官方例子即可。
怎樣實現(xiàn)跨域：
什么是跨域：當(dāng)一個請求url的協(xié)議、域名、端口三者之間任意一個與當(dāng)前頁面url不同即為跨域。
在前端開發(fā)是解決跨域是需要前端與后端進行共同解決的，特別實在調(diào)試開發(fā)階段前端配置跨域是非常重要且有必要的。
在配置跨域是需要vue.config.js+axios進行聯(lián)合開發(fā)，從而實現(xiàn)前端的跨域能力，在后端沒有配置跨域的情況下與后端實現(xiàn)數(shù)據(jù)交互，加快開發(fā)進度。
1、 vue.config.js(如沒有請在根目錄新建)，具體代碼如下(可直接拷貝)： 2、 // Vue.config.js 配置選項 3、 4、 module.exports = { 5、 publicPath: "./", 6、 // 構(gòu)建時的輸出目錄 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和端口是我們本機的;下面為需要跨域的 19、 proxy: { //配置跨域 20、 '/ks': { 21、 target: 'http://search.kuwo.cn', //這里后臺的地址模擬的;應(yīng)該填寫你們真實的后臺接口 22、 ws: true, 23、 changOrigin: true, //允許跨域 24、 pathRewrite: { 25、 '^/ks': '' //請求的時候使用這個api就可以 26、 } 27、 }, 28、 '/kp': { 29、 target: 'http://antiserver.kuwo.cn', //這里后臺的地址模擬的;應(yīng)該填寫你們真實的后臺接口 30、 ws: true, 31、 changOrigin: true, //允許跨域 32、 pathRewrite: { 33、 '^/kp': '' //請求的時候使用這個api就可以 34、 } 35、 } 36、 } 37、 38、 }, 39、 }2、怎樣進行跨域調(diào)用：
在原有的axios開發(fā)的api基礎(chǔ)上在鏈接前增加pathRewrite的名稱如：
編程式請求：
this.$axios({ method: 'post', url: '/ks/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' }});便可實現(xiàn)跨域的功能。
配置多個領(lǐng)域：
在我們實際的開發(fā)中往往需要調(diào)用開發(fā)的api鏈接可能不一樣(例如：圖片鏈接api是a.com、天氣鏈接是b.com)，那么我們調(diào)試的時候需要配置兩個跨域。
示例代碼：
40、 module.exports = { 41、 publicPath: "./", 42、 // 構(gòu)建時的輸出目錄 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和端口是我們本機的;下面為需要跨域的 55、 proxy: { //配置跨域 56、 '/image: { 57、 target: 'http://a.com', //這里后臺的地址模擬的;應(yīng)該填寫你們真實的后臺接口 58、 ws: true, 59、 changOrigin: true, //允許跨域 60、 pathRewrite: { 61、 '^/image': '' //請求的時候使用這個api就可以 62、 } 63、 }, 64、 '/wt': { 65、 target: 'http://antiserver.kuwo.cn', //這里后臺的地址模擬的;應(yīng)該填寫你們真實的后臺接口 66、 ws: true, 67、 changOrigin: true, //允許跨域 68、 pathRewrite: { 69、 '^/wt': '' //請求的時候使用這個api就可以 70、 } 71、 } 72、 } 73、 74、 }, 75、 }此時如果我們需要進行跨域請求。
請求圖片：
this.$axios({ method: 'post', url: '/image/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' }});請求天氣：
this.$axios({ method: 'post', url: '/wt/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' }});注意：
1、 跨域配置指的是在本地運行npm環(huán)境中跨域，在打包后還是需要服務(wù)器的支持和后端支持，直接打包上下并不會跨域。
2、 在配置多個跨域時請注意首位名字必須一致。
例子：
基于EuiAdmin+axios實現(xiàn)跨域與酷我音樂進行交互，實現(xiàn)音樂播放器例子：
“怎么實現(xiàn)Vue集成Axios、調(diào)用、跨域、配置多個跨域”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！
文章標(biāo)題：怎么實現(xiàn)Vue集成Axios、調(diào)用、跨域、配置多個跨域
當(dāng)前網(wǎng)址：http://www.ef60e0e.cn/article/ieieoo.html
