方法一:
在package.json 內(nèi)追追加如下
"proxy":"http://localhost:5000"
"http://localhost:5000"是你需要轉(zhuǎn)接的請(qǐng)求地址
方法二:
第一步: 創(chuàng)建代理配置文件
在src下創(chuàng)建配置未見(jiàn): src/setupProxy.js(文件名建議默認(rèn)setupProxy.js赎离,我也沒(méi)試過(guò)別的)
缺點(diǎn)是只能配置單個(gè)單利
第二步: 在setupProxy.js內(nèi)編寫(xiě)具體代理規(guī)則
const proxy = require('http-proxy-middleware')
module.exports = function(app) {
app.use(
proxy('/api1', { //api1是需要轉(zhuǎn)發(fā)的請(qǐng)求(所有帶有/api1前綴的請(qǐng)求都會(huì)轉(zhuǎn)發(fā)給5000)
target: 'http://localhost:5000', //配置轉(zhuǎn)發(fā)目標(biāo)地址(能返回?cái)?shù)據(jù)的服務(wù)器地址)
changeOrigin: true, //控制服務(wù)器接收到的請(qǐng)求頭中host字段的值
/*
changeOrigin設(shè)置為true時(shí)寒砖,服務(wù)器收到的請(qǐng)求頭中的host為:localhost:5000
changeOrigin設(shè)置為false時(shí)牺氨,服務(wù)器收到的請(qǐng)求頭中的host為:localhost:3000
changeOrigin默認(rèn)值為false婆翔,但我們一般將changeOrigin值設(shè)為true
*/
pathRewrite: {'^/api1': ''} //去除請(qǐng)求前綴久橙,保證交給后臺(tái)服務(wù)器的是正常請(qǐng)求地址(必須配置)
}),
proxy('/api2', {
target: 'http://localhost:5001',
changeOrigin: true,
pathRewrite: {'^/api2': ''}
})
)
}
優(yōu)點(diǎn):可以配置多個(gè)代理耘柱,可以靈活的控制請(qǐng)求是否走代理蒂萎。
缺點(diǎn):配置繁瑣,前端請(qǐng)求資源時(shí)必須加前綴虎囚。