react腳手架配置代理的實現(xiàn)
更新時間：2023年02月24日 09:26:50 作者：SoWhat~
本文主要介紹了react腳手架配置代理的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
方法一
在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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用React Native創(chuàng)建以太坊錢包實現(xiàn)轉(zhuǎn)賬等功能
這篇文章主要介紹了使用React Native創(chuàng)建以太坊錢包，實現(xiàn)轉(zhuǎn)賬等功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了基于React+Redux的SSR實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
一文教會你用redux實現(xiàn)computed計算屬性
在computed中,可以定義一些屬性,即計算屬性,下面這篇文章主要給大家介紹了關(guān)于如何利用redux實現(xiàn)computed計算屬性的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
在Ant Design Pro登錄功能中集成圖形驗證碼組件的方法步驟
這篇文章主要介紹了在Ant Design Pro登錄功能中集成圖形驗證碼組件的方法步驟，這里的登錄功能其實就是一個表單提交，實現(xiàn)起來也很簡單，具體實例代碼跟隨小編一起看看吧2021-05-05
ReactNative踩坑之配置調(diào)試端口的解決方法
本篇文章主要介紹了ReactNative踩坑之配置調(diào)試端口的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要為大家介紹了React組件里this指向了undefined原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
React.js組件實現(xiàn)拖拽排序組件功能過程解析
這篇文章主要介紹了React.js組件實現(xiàn)拖拽排序組件功能過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-04-04
Redux thunk中間件及執(zhí)行原理詳細(xì)分析
redux的核心概念其實很簡單：將需要修改的state都存入到store里，發(fā)起一個action用來描述發(fā)生了什么，用reducers描述action如何改變state tree，這篇文章主要介紹了Redux thunk中間件及執(zhí)行原理分析2022-09-09
在React項目中使用iframe嵌入一個網(wǎng)站的步驟
本文介紹了如何在React項目中通過iframe嵌入百度網(wǎng)站的步驟,首先創(chuàng)建一個Baidu.js組件,并在該組件中設(shè)置iframe來加載百度,然后在App.js中引入并使用Baidu組件,還討論了因安全策略可能無法加載某些網(wǎng)站的問題,需要的朋友可以參考下2024-09-09
這篇文章主要為大家介紹了React基于路由的代碼分割技術(shù)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12