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)文章
Vue.js實(shí)現(xiàn)移動(dòng)端短信驗(yàn)證碼功能
現(xiàn)在的短信驗(yàn)證碼一般為4位或6位,則頁(yè)面中會(huì)相應(yīng)的顯示4個(gè)或6個(gè)文本框.好多網(wǎng)站需求都有此功能,今天小編給大家分享基于vue.js實(shí)現(xiàn)移動(dòng)端短信驗(yàn)證碼功能,需要的朋友參考下吧2017-03-03vue+elementUI顯示表格指定列合計(jì)數(shù)據(jù)方式
這篇文章主要介紹了vue+elementUI顯示表格指定列合計(jì)數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vue3在單個(gè)組件中實(shí)現(xiàn)類似mixin的事件調(diào)用
這篇文章主要為大家詳細(xì)介紹了vue3如何在單個(gè)組件中實(shí)現(xiàn)類似mixin的事件調(diào)用,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01Vue后臺(tái)中優(yōu)雅書寫狀態(tài)標(biāo)簽的方法實(shí)例
在Vue中,我們可以非常便捷地通過標(biāo)簽實(shí)現(xiàn)狀態(tài)的保存,這篇文章主要給大家介紹了關(guān)于Vue后臺(tái)中如何優(yōu)雅的書寫狀態(tài)標(biāo)簽的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08vue實(shí)現(xiàn)簡(jiǎn)單分頁(yè)功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單分頁(yè)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03