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

這篇文章主要介紹“react腳手架配置代理如何實現(xiàn)”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“react腳手架配置代理如何實現(xiàn)”文章能幫助大家解決問題。

方法一

在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)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。