Vue.js2.0+Element UI用axios進行網(wǎng)絡(luò)通訊及如何解決跨域的問題

Vue.js2.0+Element UI用axios進行網(wǎng)絡(luò)通訊及如何解決跨域的問題，針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

安裝axios

在命令控制臺中切換成當(dāng)前工作目錄,輸入npm i axios -s -dev進行安裝

配置axios

打開main.js文件,里面加入import axios from 'axios'

然后加入Vue.prototype.$http = axios

調(diào)用API

我們在項目的HelloWorld.vue里面加一個按鈕,給他加上一個點擊事件

   <el-button type="warning" @click="get">按鈕</el-button>

然后在methods里面加入get事件

然后保存啟動項目,點擊按鈕

百度了一下,發(fā)現(xiàn)axios組件需要實現(xiàn)跨域才能訪問,很多方案都是讓服務(wù)端去改這塊,終于搜好久后發(fā)現(xiàn)一個解決方法.

axios實現(xiàn)跨域訪問

在config/index.js文件找到proxyTable在里面加入

注:

其中 '/api' 為匹配項，target 為被請求的地址

因為在 ajax 的 url 中加了前綴 '/api'，而原本的接口是沒有這個前綴的

所以需要通過 pathRewrite 來重寫地址，將前綴 '/api' 轉(zhuǎn)為 '/'

如果本身的接口地址就有 '/api' 這種通用前綴，就可以把 pathRewrite 刪掉

然后回到我們的HelloWorld.vue里

原來的URL寫的是全路徑,現(xiàn)在因為我們在config/index.js里已經(jīng)配置了target的地址,所里這里直接改后面的路徑即可

對比上圖里實際地址是沒有api/的,所在在index.js里面路由

               pathRewrite: {

                   '^/api': '/'

               }

就起到作用了

重新運行程序后點擊按鈕后出現(xiàn)返回結(jié)果

關(guān)于Vue.js2.0+Element UI用axios進行網(wǎng)絡(luò)通訊及如何解決跨域的問題問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。