目錄

• 方法一
• 方法二

方法一

在package.json 中追加如下配置

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

說明：

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

缺點：不能配置多個代理

工作方式： 當請求了 3000 不存在的資源時，那么該請求會轉發(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 是需要轉發(fā)的請求（所有帶有 /api1 前綴的請求都會轉發(fā)給 5000）
    target: "http://localhost:5000", // 配置轉發(fā)目標地址（返回數據的服務器地址）
    changeOrigin: true, // 控制服務器接收到的請求頭中 host字段的值
    /**
changeOrigin為 true時，服務器收到的請求頭中的host為： localhost:5000;
changeOrigin 為 false 時，服務器收到的請求頭中的 host 為; localhost:3000;
changeOrigin默認為false,但是一般將 changeOrigin 值設置為 true
    */
    pathRewrite:{
"^/api1":"" // 去除請求前綴，保證交給后臺服務器的是正常的請求地址（必須配置）
    }
}),
proxy("/api2",{
    target: "http://localhost:5001",
    changeOrigin: true,
    pathRewrite:{
"^/api2":""
    }
})
    ）
}

說明：

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

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

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