目錄

• 方法一
• 方法二

方法一

在package.json 中追加如下配置

"proxy":"http://localhost:5000"

說(shuō)明：

優(yōu)點(diǎn)： 配置簡(jiǎn)單，前端請(qǐng)求資源時(shí)可以不加任何前綴。

缺點(diǎn)：不能配置多個(gè)代理

工作方式： 當(dāng)請(qǐng)求了 3000 不存在的資源時(shí)，那么該請(qǐng)求會(huì)轉(zhuǎn)發(fā)給5000（優(yōu)先匹配前端資源）

方法二

創(chuàng)建代理配置文件，文件名為 setupProxy.js 名字不能改

在src下創(chuàng)建配置文件： src/setupProxy.js

編寫(xiě)setupProxy.js 配置具體代理規(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為 true時(shí)，服務(wù)器收到的請(qǐng)求頭中的host為： localhost:5000;
changeOrigin 為 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":""
    }
})
    ）
}

說(shuō)明：

優(yōu)點(diǎn)：可以配置多個(gè)代理，可以靈活的控制請(qǐng)求是否走代理，

缺點(diǎn)： 配置繁瑣，前端請(qǐng)求資源時(shí)必須加前綴

到此這篇關(guān)于react腳手架配置代理的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)react腳手架配置代理內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！