React配置代理方式(proxy)
更新時(shí)間：2024年07月12日 08:47:47 作者：苦夏木禾
這篇文章主要介紹了React配置代理方式(proxy),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
React配置代理(proxy)
使用axios進(jìn)行請(qǐng)求，而配置代理過(guò)程
第一種
在package.json中，添加proxy配置項(xiàng),之后所有的請(qǐng)求都會(huì)指向該地址
但這種方法只能配置一次，也只有一個(gè)
- 示例：
"proxy":"https://localhost:5000"
添加后，重啟項(xiàng)目?。?！讓配置文件加載生效
然后就可以進(jìn)行請(qǐng)求了
比如請(qǐng)求地址是
http://localhost:5000/api/index/index
- 那就可以寫
axios.get("/api/index/index").then(
response => {console.log('成功了',response.data);},
error => {console.log('失敗了',error);}
)第二種
在src中，新建setupProxy.js（必須是這個(gè)名字，react腳手架會(huì)識(shí)別）
在文件中寫以下配置內(nèi)容（最近的項(xiàng)目要使用高版本這個(gè)，不然會(huì)導(dǎo)致項(xiàng)目無(wú)法啟動(dòng)）：
- http-proxy-middleware高版本（2以上）：
const proxy = require('http-proxy-middleware')//引入http-proxy-middleware，react腳手架已經(jīng)安裝
module.exports = function(app){
app.use(
proxy.createProxyMiddleware('/api',{ //遇見/api1前綴的請(qǐng)求，就會(huì)觸發(fā)該代理配置
target:'http://localhost:5000', //請(qǐng)求轉(zhuǎn)發(fā)給誰(shuí)
changeOrigin:true,//控制服務(wù)器收到的請(qǐng)求頭中Host的值
pathRewrite:{'^/api':''} //重寫請(qǐng)求路徑，下面有示例解釋
}),
proxy.createProxyMiddleware('/api2',{
target:'http://localhost:5001',
changeOrigin:true,
pathRewrite:{'^/api2':''}
}),
)
}- http-proxy-middleware低版本（2以下）：
const proxy = require('http-proxy-middleware')//引入http-proxy-middleware，react腳手架已經(jīng)安裝
module.exports = function(app){
app.use(
proxy('/api',{ //遇見/api1前綴的請(qǐng)求，就會(huì)觸發(fā)該代理配置
target:'http://localhost:5000', //請(qǐng)求轉(zhuǎn)發(fā)給誰(shuí)
changeOrigin:true,//控制服務(wù)器收到的請(qǐng)求頭中Host的值
pathRewrite:{'^/api':''} //重寫請(qǐng)求路徑，下面有示例解釋
}),
proxy('/api2',{
target:'http://localhost:5001',
changeOrigin:true,
pathRewrite:{'^/api2':''}
}),
)
}寫好以后，重啟項(xiàng)目?。。?/p>
然后進(jìn)行請(qǐng)求
假設(shè)地址是
http://localhost:5000/api/index/index
//沒(méi)有開啟重新路徑
axios.get("/api/index/index").then(
response => {console.log('成功了',response.data);},
error => {console.log('失敗了',error);}
)
//開啟重寫路徑
axios.get("/api/api/index/index").then(
response => {console.log('成功了',response.data);},
error => {console.log('失敗了',error);}
)總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了react如何實(shí)現(xiàn)表格多條件搜索問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
React Fiber 架構(gòu)解決頁(yè)面卡頓問(wèn)題的全過(guò)程
本文從問(wèn)題與目標(biāo)、核心數(shù)據(jù)結(jié)構(gòu)、調(diào)度與中斷、渲染階段與提交階段、優(yōu)先級(jí)與 lanes、并發(fā)特性到常見誤區(qū)與優(yōu)化建議,全景式拆解 React Fiber,為何它能夠顯著降低交互卡頓并提升可響應(yīng)性,感興趣的朋友跟隨小編一起看看吧2025-12-12
React Hooks - useContetx和useReducer的使用實(shí)例詳解
這篇文章主要介紹了React Hooks - useContetx和useReducer的基本使用,本文通過(guò)實(shí)例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-11-11
本文主要介紹了React子組件調(diào)用父組件的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-08-08
React如何實(shí)現(xiàn)視頻旋轉(zhuǎn)縮放
這篇文章主要為大家詳細(xì)介紹了React如何實(shí)現(xiàn)視頻旋轉(zhuǎn)縮放功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
在React中使用Hooks時(shí),開發(fā)者可能會(huì)遇到一些常見的坑點(diǎn),這篇文章主要介紹了react如何解決Hooks閉包陷阱的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2026-05-05
React組件三大核心屬性State?props?Refs介紹
組件實(shí)例的三大核心屬性是：State、Props、Refs。類組件中這三大屬性都存在。函數(shù)式組件中訪問(wèn)不到?this，也就不存在組件實(shí)例這種說(shuō)法，但由于它的特殊性（函數(shù)可以接收參數(shù)），所以存在Props這種屬性2023-02-02
詳解React中多種組件通信方式的實(shí)現(xiàn)
在React中,組件之間的通信是一個(gè)非常重要的話題,React提供了幾種方式來(lái)實(shí)現(xiàn)跨組件通信,下面小編將詳細(xì)講講其中幾種通信方式,并提供實(shí)際的代碼示例,需要的可以參考下2023-11-11
react項(xiàng)目自行配置熱更新的實(shí)現(xiàn)
本文主要介紹了react項(xiàng)目自行配置熱更新的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11
react redux中如何獲取store數(shù)據(jù)并將數(shù)據(jù)渲染出來(lái)
這篇文章主要介紹了react redux中如何獲取store數(shù)據(jù)并將數(shù)據(jù)渲染出來(lái)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08