目錄

• 方法一
• 方法二

方法一

在package.json 中追加如下配置

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

說明：

優(yōu)點： 配置簡單，前端請求資源時可以不加任何前綴。

缺點：不能配置多個代理

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

方法二

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

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

編寫setupProxy.js 配置具體代理規(guī)則：

const proxy = require("http-proxy-middleware")
module.exports = function(app) {
    app.use(
proxy("/api1",{ // api1 是需要轉(zhuǎn)發(fā)的請求（所有帶有 /api1 前綴的請求都會轉(zhuǎn)發(fā)給 5000）
    target: "http://localhost:5000", // 配置轉(zhuǎn)發(fā)目標(biāo)地址（返回數(shù)據(jù)的服務(wù)器地址）
    changeOrigin: true, // 控制服務(wù)器接收到的請求頭中 host字段的值
    /**
changeOrigin為 true時，服務(wù)器收到的請求頭中的host為： localhost:5000;
changeOrigin 為 false 時，服務(wù)器收到的請求頭中的 host 為; localhost:3000;
changeOrigin默認(rèn)為false,但是一般將 changeOrigin 值設(shè)置為 true
    */
    pathRewrite:{
"^/api1":"" // 去除請求前綴，保證交給后臺服務(wù)器的是正常的請求地址（必須配置）
    }
}),
proxy("/api2",{
    target: "http://localhost:5001",
    changeOrigin: true,
    pathRewrite:{
"^/api2":""
    }
})
    ）
}

說明：

優(yōu)點：可以配置多個代理，可以靈活的控制請求是否走代理，

缺點： 配置繁瑣，前端請求資源時必須加前綴

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