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

更新時間：2023年02月24日 09:26:50 作者：SoWhat~

本文主要介紹了react腳手架配置代理的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

方法一

在package.json 中追加如下配置

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

說明：

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

缺點：不能配置多個代理

工作方式：當請求了 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ā)目標地址（返回數(shù)據(jù)的服務(wù)器地址）
            changeOrigin: true, // 控制服務(wù)器接收到的請求頭中 host字段的值
            /**
                changeOrigin為 true時，服務(wù)器收到的請求頭中的host為： localhost:5000;
                changeOrigin 為 false 時，服務(wù)器收到的請求頭中的 host 為; localhost:3000;
                changeOrigin默認為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應(yīng)用中避免白屏現(xiàn)象的方法小結(jié)
在開發(fā)React應(yīng)用程序時,我們都曾遇到過這樣的場景：一個未被捕獲的異常突然中斷了組件的渲染流程,導(dǎo)致用戶界面呈現(xiàn)出一片空白,也就是俗稱的“白屏”現(xiàn)象,本文將探討如何在React應(yīng)用中有效捕獲并處理這些錯誤,避免白屏現(xiàn)象的發(fā)生,需要的朋友可以參考下
2024-06-06
React和Vue組件更新的實現(xiàn)及區(qū)別
React 和 Vue 都是當今最流行的前端框架,它們都實現(xiàn)了組件化開發(fā)模式,本文將從React和Vue的組件更新原理入手,剖析兩者虛擬DOM difer算法的異同點,具有一定的參考價值,感興趣的可以了解一下
2024-02-02
React Electron生成桌面應(yīng)用過程
這篇文章主要介紹了React+Electron快速創(chuàng)建并打包成桌面應(yīng)用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
2022-12-12
react實現(xiàn)antd線上主題動態(tài)切換功能
這篇文章主要介紹了react實現(xiàn)antd線上主題動態(tài)切換功能,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-08-08
如何在React中直接使用Redux
這篇文章主要介紹了如何在React中直接使用Redux,目前redux在react中使用是最多的，所以我們需要將之前編寫的redux代碼，融入到react當中去，本文給大家詳細講解，需要的朋友可以參考下
2022-11-11
react使用useImperativeHandle示例詳解
這篇文章主要為大家介紹了react使用useImperativeHandle示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-09-09
React組件化的一些額外知識點補充
React是一個用于構(gòu)建用戶界面的JavaScript庫,下面這篇文章主要給大家介紹了關(guān)于React組件化的一些額外知識點,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-10-10
ahooks useVirtualList 封裝虛擬滾動列表
這篇文章主要為大家介紹了ahooks useVirtualList 封裝虛擬滾動列表詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-09-09
react+ts實現(xiàn)簡單jira項目的最佳實踐記錄
這篇文章主要介紹了react+ts實現(xiàn)簡單jira項目，本文通過圖文實例相結(jié)合給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2021-07-07
react源碼層分析協(xié)調(diào)與調(diào)度
本文主要介紹了深入理解React協(xié)調(diào)與調(diào)度(Scheduler)原理，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
2022-10-10