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與后端接口是如何進(jìn)行接口請求的原理
最近遇到一個很奇怪的問題
前端vue和后端java項目布在同一臺服務(wù)器(假設(shè)該服務(wù)器為180服務(wù)器),該180服務(wù)器無法通過外網(wǎng)訪問,前端通過另一臺可ping通180服務(wù)器和連接外網(wǎng)的服務(wù)器(假設(shè)為181服務(wù)器)進(jìn)行nginx外網(wǎng)映射訪問。此時,我們的設(shè)計是希望前端通過內(nèi)網(wǎng)IP直接對后端接口請求,而不是去走域名進(jìn)行請求,這樣能夠在請求時少走一次防火墻,提供接口請求速度。
但是理想很美好,但是現(xiàn)實是最后發(fā)現(xiàn),前端一直無法成功訪問到后端接口,一直請求失敗。經(jīng)過多方排查和請教大佬,終于清楚的理解了前后端分離的請求是怎么走的。
其實,在用戶在瀏覽器端進(jìn)入應(yīng)用時,他不是直接去服務(wù)器訪問前端項目,而是通過下載,把前端的項目載入到用戶的瀏覽器中,然后再通過瀏覽器下載下來的前端vue項目進(jìn)行請求后端接口的,這時候,如果后端的接口請求改成試用180服務(wù)器的ip進(jìn)行請求,那么外網(wǎng)是無法獲取到內(nèi)網(wǎng)180服務(wù)器的后端服務(wù)的,因此就導(dǎo)致請求一直失敗。
因此在前后端分離的項目中,前端在請求后端接口時,一定要通過域名進(jìn)行訪問,或者后端的服務(wù)器需要能夠被外網(wǎng)訪問到才可以進(jìn)行正常的接口訪問。
附上如下圖示
手畫請諒解
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue3使用vue-i18n的方法詳解(ts中使用$t,?vue3不用this)
所謂的vue-i18n國際化方案就是根據(jù)它的規(guī)則自己建立一套語言字典,對于每一個字(message)都有一個統(tǒng)一的標(biāo)識符,下面這篇文章主要給大家介紹了關(guān)于vue3使用vue-i18n(ts中使用$t,?vue3不用this)的相關(guān)資料,需要的朋友可以參考下2022-12-12vue實現(xiàn)element上傳多張圖片瀏覽刪除功能
這篇文章主要介紹了vue實現(xiàn)element上傳多張圖片瀏覽刪除功能,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-10-10