成人在线亚洲_国产日韩视频一区二区三区_久久久国产精品_99国内精品久久久久久久

您的位置:首頁技術(shù)文章
文章詳情頁

react腳手架配置代理的實(shí)現(xiàn)

瀏覽:116日期:2022-06-01 18:10:39
目錄
  • 方法一
  • 方法二

方法一

在package.json 中追加如下配置

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

說明:

優(yōu)點(diǎn): 配置簡單,前端請求資源時(shí)可以不加任何前綴。

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

工作方式: 當(dāng)請求了 3000 不存在的資源時(shí),那么該請求會(huì)轉(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 前綴的請求都會(huì)轉(zhuǎn)發(fā)給 5000)
    target: "http://localhost:5000", // 配置轉(zhuǎn)發(fā)目標(biāo)地址(返回?cái)?shù)據(jù)的服務(wù)器地址)
    changeOrigin: true, // 控制服務(wù)器接收到的請求頭中 host字段的值
    /**
changeOrigin為 true時(shí),服務(wù)器收到的請求頭中的host為: localhost:5000;
changeOrigin 為 false 時(shí),服務(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)點(diǎn):可以配置多個(gè)代理,可以靈活的控制請求是否走代理,

缺點(diǎn): 配置繁瑣,前端請求資源時(shí)必須加前綴

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

標(biāo)簽: JavaScript