快捷導(dǎo)航

vue中配置后端接口服務(wù)信息詳解

更新時間：2022年03月29日 13:37:43 作者：-檸檬不要羨慕西瓜的甜i

這篇文章主要介紹了vue中配置后端接口服務(wù)信息詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue配置后端接口服務(wù)信息

最重要一點

配置完信息后，重新啟動服務(wù) npm run dev

需要在config下的index.js中找到

module.exports = {
? dev: {?
? }
}

以此接口為例

dev: {
? ? // Paths
? ? assetsSubDirectory: 'static',
? ? assetsPublicPath: '/',
? ? proxyTable: {
? ? ? ? '/api': {
? ? ? ? ? ? target: 'http://100.1.1.1:10', ? ?//設(shè)置你調(diào)用的接口域名和端口號 別忘了加http
? ? ? ? ? ? changeOrigin: true
? ? ? ? }
? ? },
}

然后在main.js中引入axios npm install axios -d

import axios from 'axios'
? Vue.prototype.$http = axios.create({
? timeout: 10 * 1000
})

然后在vue組件中這樣使用：

this.$http.get('/static/data/xxxxx.json')
? .then(res => {
? ? console.log(res)
? }).catch(err => {
? console.log(err)
})

vue與后端接口是如何進行接口請求的原理

最近遇到一個很奇怪的問題

前端vue和后端java項目布在同一臺服務(wù)器（假設(shè)該服務(wù)器為180服務(wù)器），該180服務(wù)器無法通過外網(wǎng)訪問，前端通過另一臺可ping通180服務(wù)器和連接外網(wǎng)的服務(wù)器（假設(shè)為181服務(wù)器）進行nginx外網(wǎng)映射訪問。此時，我們的設(shè)計是希望前端通過內(nèi)網(wǎng)IP直接對后端接口請求，而不是去走域名進行請求，這樣能夠在請求時少走一次防火墻，提供接口請求速度。

但是理想很美好，但是現(xiàn)實是最后發(fā)現(xiàn)，前端一直無法成功訪問到后端接口，一直請求失敗。經(jīng)過多方排查和請教大佬，終于清楚的理解了前后端分離的請求是怎么走的。

其實，在用戶在瀏覽器端進入應(yīng)用時，他不是直接去服務(wù)器訪問前端項目，而是通過下載，把前端的項目載入到用戶的瀏覽器中，然后再通過瀏覽器下載下來的前端vue項目進行請求后端接口的，這時候，如果后端的接口請求改成試用180服務(wù)器的ip進行請求，那么外網(wǎng)是無法獲取到內(nèi)網(wǎng)180服務(wù)器的后端服務(wù)的，因此就導(dǎo)致請求一直失敗。

因此在前后端分離的項目中，前端在請求后端接口時，一定要通過域名進行訪問，或者后端的服務(wù)器需要能夠被外網(wǎng)訪問到才可以進行正常的接口訪問。