快捷導(dǎo)航

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

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

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

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

最重要一點(diǎn)

配置完信息后，重新啟動(dòng)服務(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)用的接口域名和端口號(hà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與后端接口是如何進(jìn)行接口請(qǐng)求的原理

最近遇到一個(gè)很奇怪的問(wèn)題

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

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

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

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