vue.config.js使用代理配置真實(shí)請(qǐng)求url方式
vue.config.js使用代理配置真實(shí)請(qǐng)求url
前端請(qǐng)求接口過程中會(huì)統(tǒng)一配置代理請(qǐng)求url,配置之后瀏覽器只能看到local host路徑。

為方便查看請(qǐng)求的真實(shí)ip,需要在vue.config.js中做如下配置,便能在瀏覽器實(shí)時(shí)查看到真實(shí)地址
devServer: {
//端口配置
port: '9080',
open: true,
//host: 'localhost',打開之后不能使用IP訪問項(xiàng)目
proxy: {
'/basic': {
target: process.env.VUE_APP_BASE_API,//配置文件的請(qǐng)求url
// target: 'http://10.31.126.172:9080',
changeOrigin: true,
ws: true,
// pathRewrite: { '^/api': '' },
onProxyRes(proxyRes, req, res) {
//在控制臺(tái)顯示真實(shí)代理地址
const realUrl = new URL(req.url || '',process.env.VUE_APP_BASE_API)?.href || ''
proxyRes.headers['x-real-url'] = realUrl
},
},
},
},配置完重啟,效果如下:

vue代理配置的理解(vue.config.js)
module.exports = {
// 其他配置
......
// 代理配置
devServer: {
https: true, // 默認(rèn)是false, 默認(rèn)就是http協(xié)議,true將http協(xié)議轉(zhuǎn)換為https協(xié)議
// 代理配置
proxy: {
'/api': { // 配置需要代理的路徑 --> 這里的意思是代理http://localhost:80/api/后的所有路由
target: 'https://172.20.9.153:8085', // 目標(biāo)地址 --> 服務(wù)器地址
changeOrigin: true, // 允許跨域
ws: true, // 允許websocket代理
// 如果這里沒有進(jìn)行路徑重寫,當(dāng)你訪問http://localhost:80/api/login/,實(shí)際上訪問的就是https://172.20.9.153:8085/api/login/
pathRewrite: { // 重寫代理路徑
// 就是把路徑中的api都替換為空的字符串
'^/api': '', // 因?yàn)榉?wù)端地址里面是沒有api字段的,api只是為了區(qū)別需要代理的路徑,如果服務(wù)端有api字段則不需要重新
}
}
}
}
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
使用el-row及el-col頁面縮放時(shí)出現(xiàn)空行的問題及解決
這篇文章主要介紹了使用el-row及el-col頁面縮放時(shí)出現(xiàn)空行的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
解決vue中數(shù)據(jù)更新視圖不更新問題this.$set()方法
這篇文章主要介紹了解決vue中數(shù)據(jù)更新視圖不更新問題this.$set()方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06
vue使用Echarts設(shè)置數(shù)據(jù)無效問題記錄及解決方法
這篇文章主要介紹了vue使用Echarts設(shè)置數(shù)據(jù)無效問題記錄,本文通過場景分析給大家分享解決方法,需要的朋友可以參考下2022-08-08
vue移動(dòng)端實(shí)現(xiàn)手指滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了vue移動(dòng)端實(shí)現(xiàn)手指滑動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-06-06
基于Vue3實(shí)現(xiàn)列表虛擬滾動(dòng)效果
這篇文章主要為大家介紹了如何利用Vue3實(shí)現(xiàn)列表虛擬滾動(dòng)效果,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)或工作有一定價(jià)值,需要的可以參考一下2022-04-04
vue+css如何實(shí)現(xiàn)圓環(huán)漸變儀表盤
這篇文章主要介紹了vue+css如何實(shí)現(xiàn)圓環(huán)漸變儀表盤問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue2結(jié)合element-ui的gantt圖實(shí)現(xiàn)可拖拽甘特圖
因?yàn)楣ぷ髦幸玫礁侍貓D,所以我在網(wǎng)上搜索可以用的甘特圖,搜索了好多,但是網(wǎng)上搜到大多數(shù)都很雞肋,不能直接使用,下面這篇文章主要給大家介紹了關(guān)于vue2結(jié)合element-ui的gantt圖實(shí)現(xiàn)可拖拽甘特圖的相關(guān)資料,需要的朋友可以參考下2022-11-11

