react腳手架配置代理的實現

目錄

• 方法一
• 方法二

方法一

在package.json 中追加如下配置

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

說明：

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

缺點：不能配置多個代理

工作方式： 當請求了 3000 不存在的資源時，那么該請求會轉發給5000（優先匹配前端資源）

方法二

創建代理配置文件，文件名為 setupProxy.js 名字不能改

在src下創建配置文件： src/setupProxy.js

編寫setupProxy.js 配置具體代理規則：

const proxy = require("http-proxy-middleware")
module.exports = function(app) {
    app.use(
proxy("/api1",{ // api1 是需要轉發的請求（所有帶有 /api1 前綴的請求都會轉發給 5000）
    target: "http://localhost:5000", // 配置轉發目標地址（返回數據的服務器地址）
    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":""
    }
})
    ）
}

說明：

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

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

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