vue-cli中devServer.proxy相關配置項的使用
devServer.proxy相關配置項的說明
如圖：
devServer.proxy中的 changeOrigin 參數
changeOrigin 為false時，請求頭中host仍然是瀏覽器發(fā)送過來的host;如果設置成true：發(fā)送請求頭中host會設置成target的值。
devServer.proxy中的 pathRewrite 參數
本示例中，pathRewrite設置了 '^/lr': '' ，作用如下:
使用代理，首先需要有一個標識，告訴程序這個連接要使用代理，不然的話，可能你的html、css、js、矢量圖等靜態(tài)資源都跑去代理。所以我們要通過一個唯一標識，讓接口使用代理，靜態(tài)資源文件使用本地。
proxy中的 '/lr':{······}，就是告訴node，我的接口是要以 /lr 開頭的才使用代理。所有的接口都要寫成 /lr/xx/xx ，以 /lr 開頭，最后代理的接口路徑路徑就是 http://localhost:8080/lirong/lr/xx/xx
但是例子中真實的后臺數據接口里沒有 /lr，直接就是 http://localhost:8080/lirong/xx/xx ，所以就需要配置 pathRewrite，用'^/lr': '' 將 /lr 去掉，這樣既有正確的標識，又能在真實請求接口的時候去掉 /lr 。
devServer.proxy代理配置詳解
如果你的前端應用和后端 API 服務器沒有運行在同一個主機上，你需要在開發(fā)環(huán)境下將 API 請求代理到 API 服務器?？梢酝ㄟ^ *.config.js 中的 devServer.proxy 選項來配置。
.config.js文件中引入依賴項
const proxy = require('http-proxy-middleware');devServer.proxy 可以是一個指向開發(fā)環(huán)境 API 服務器的字符串
//服務器會將任何未知請求 (沒有匹配到靜態(tài)文件的請求) 代理到http://localhost:4000上
module.exports = {
? devServer: {
? ? proxy: 'http://localhost:4000'
? }
}更多的代理控制行為
const proxy = require('http-proxy-middleware');
module.exports = { ??
devServer:{
? ? host: 'localhost',//target host
? ? port: 8080,
? ? //proxy:{'/api':{}},代理器中設置/api,項目中請求路徑為/api的替換為target
? ? proxy:{
? ? ? ? '/api':{
? ? ? ? ? ? target: 'http://192.168.1.30:8085',//代理地址，這里設置的地址會代替axios中設置的baseURL
? ? ? ? ? ? changeOrigin: true,// 如果接口跨域，需要進行這個參數配置
? ? ? ? ? ? //ws: true, // proxy websockets
? ? ? ? ? ? //pathRewrite方法重寫url
? ? ? ? ? ? pathRewrite: {
? ? ? ? ? ? ? ? '^/api': '/'?
? ? ? ? ? ? ? ? //pathRewrite: {'^/api': '/'} 重寫之后url為 http://192.168.1.16:8085/xxxx
? ? ? ? ? ? ? ? //pathRewrite: {'^/api': '/api'} 重寫之后url為 http://192.168.1.16:8085/api/xxxx
? ? ? ? ? ?}
? ? }}
},
//...
}以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Pinia是一個專為Vue3設計的現代化狀態(tài)管理庫,本文主要介紹了vue3項目使用pinia狀態(tài)管理器的使用,具有一定的參考價值,感興趣的可以了解一下2024-05-05
vue中v-for和v-if不能在同一個標簽使用的最新解決方案
這篇文章主要介紹了vue中v-for和v-if不能在同一個標簽的最新解決方案,這里描述了兩種解決方案，結合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了this在vue和小程序中的使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-01-01
這篇文章主要介紹了vue部署后靜態(tài)文件加載404的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue3中使用ant-design-vue的layout組件實現動態(tài)導航欄和面包屑功能
這篇文章主要介紹了vue3中使用ant-design-vue的layout組件實現動態(tài)導航欄和面包屑功能,基于一個新建的Vue3項目上實現，本文結合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-01-01
vue實現輸入框的模糊查詢的示例代碼（節(jié)流函數的應用場景）
這篇文章主要介紹了vue實現輸入框的模糊查詢的示例代碼（節(jié)流函數的應用場景），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要介紹了Vue父子組件傳值以及父調子方法、子調父方法，文中講解非常細致，代碼幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-07-07
本文主要介紹了vue中插槽(slot)幾種類型的使用方法,主要分三種,默認插槽,具名插槽,作用域插槽,下面就來一起介紹一下,感興趣的可以了解一下2024-03-03
本文主要介紹了elementplus?card?懸浮菜單的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
證件圖片識別上傳根據業(yè)務需要，經常涉及到證件上傳，例如身份證上傳、銀行卡、營業(yè)執(zhí)照等信息，根據設計師的設計，單獨封裝了一個上傳組件，這篇文章主要介紹了vue3?證件識別上傳組件封裝,需要的朋友可以參考下2023-05-05