vue-cli中devServer.proxy相關(guān)配置項(xiàng)的使用
devServer.proxy相關(guān)配置項(xiàng)的說明
如圖:
devServer.proxy中的 changeOrigin 參數(shù)
changeOrigin 為false時,請求頭中host仍然是瀏覽器發(fā)送過來的host;如果設(shè)置成true:發(fā)送請求頭中host會設(shè)置成target的值。
devServer.proxy中的 pathRewrite 參數(shù)
本示例中,pathRewrite設(shè)置了 '^/lr': '' ,作用如下:
使用代理,首先需要有一個標(biāo)識,告訴程序這個連接要使用代理,不然的話,可能你的html、css、js、矢量圖等靜態(tài)資源都跑去代理。所以我們要通過一個唯一標(biāo)識,讓接口使用代理,靜態(tài)資源文件使用本地。
proxy中的 '/lr':{······},就是告訴node,我的接口是要以 /lr 開頭的才使用代理。所有的接口都要寫成 /lr/xx/xx ,以 /lr 開頭,最后代理的接口路徑路徑就是 http://localhost:8080/lirong/lr/xx/xx
但是例子中真實(shí)的后臺數(shù)據(jù)接口里沒有 /lr,直接就是 http://localhost:8080/lirong/xx/xx ,所以就需要配置 pathRewrite,用'^/lr': '' 將 /lr 去掉,這樣既有正確的標(biāo)識,又能在真實(shí)請求接口的時候去掉 /lr 。
devServer.proxy代理配置詳解
如果你的前端應(yīng)用和后端 API 服務(wù)器沒有運(yùn)行在同一個主機(jī)上,你需要在開發(fā)環(huán)境下將 API 請求代理到 API 服務(wù)器??梢酝ㄟ^ *.config.js 中的 devServer.proxy 選項(xiàng)來配置。
.config.js文件中引入依賴項(xiàng)
const proxy = require('http-proxy-middleware');
devServer.proxy 可以是一個指向開發(fā)環(huán)境 API 服務(wù)器的字符串
//服務(wù)器會將任何未知請求 (沒有匹配到靜態(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':{}},代理器中設(shè)置/api,項(xiàng)目中請求路徑為/api的替換為target ? ? proxy:{ ? ? ? ? '/api':{ ? ? ? ? ? ? target: 'http://192.168.1.30:8085',//代理地址,這里設(shè)置的地址會代替axios中設(shè)置的baseURL ? ? ? ? ? ? changeOrigin: true,// 如果接口跨域,需要進(jìn)行這個參數(shù)配置 ? ? ? ? ? ? //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 ? ? ? ? ? ?} ? ? }} }, //... }
以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue Transition實(shí)現(xiàn)類原生組件跳轉(zhuǎn)過渡動畫的示例
本篇文章主要介紹了Vue Transition實(shí)現(xiàn)類原生組件跳轉(zhuǎn)過渡動畫的示例,具有一定的參考價值,有興趣的可以了解一下2017-08-08Ant?Design_Form表單上傳文件組件實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了Ant?Design_Form表單上傳文件組件實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03利用Vue模擬實(shí)現(xiàn)element-ui的分頁器效果
這篇文章主要為大家詳細(xì)介紹了如何利用Vue模擬實(shí)現(xiàn)element-ui的分頁器效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以動手嘗試一下2022-11-11