快捷導(dǎo)航

React開(kāi)啟代理的2種實(shí)用方式

更新時(shí)間：2021年07月29日 11:33:47 作者：Mannqo

最近有不少伙伴詢問(wèn)react的代理配置,自己也去試驗(yàn)了一下發(fā)現(xiàn)不少的問(wèn)題,在這就將所遇到的心得分享出來(lái),這篇文章主要給大家介紹了關(guān)于React開(kāi)啟代理的2種實(shí)用方式的相關(guān)資料,需要的朋友可以參考下

開(kāi)啟代理的兩種方式

react并沒(méi)有封裝好了的ajax請(qǐng)求的代碼供我們直接使用，在進(jìn)行交互的時(shí)候，我們需要自己封裝ajax代碼或者使用第三方ajax庫(kù)，一般我們用axios(輕量級(jí))。

先說(shuō)一下為什么需要代理？

比如說(shuō)，在本地寫(xiě)一個(gè)端口為5000的服務(wù)器時(shí)，當(dāng)我們通過(guò)端口3000去發(fā)生請(qǐng)求，會(huì)出現(xiàn)跨域的問(wèn)題（原來(lái)3000端口的ajax引擎把響應(yīng)攔截了），此時(shí)可以通過(guò)代理來(lái)解決問(wèn)題。所謂的代理就是一個(gè)傳遞信息的工具，端口為3000的請(qǐng)求發(fā)給開(kāi)在3000端口的代理，代理再轉(zhuǎn)發(fā)給5000端口的服務(wù)器，在響應(yīng)的時(shí)候，由于代理是沒(méi)有ajax引擎的代理，所以可以接收響應(yīng)，再傳遞給開(kāi)在3000端口的腳手架，從而解決了跨域的問(wèn)題。

react開(kāi)啟代理的兩種方式

方法一

在package.json文件中添加"proxy": "https://localhost:5000" 配置之后3000端口沒(méi)有的資源就會(huì)去端口5000找。也就是說(shuō)會(huì)把把發(fā)給端口為3000的請(qǐng)求轉(zhuǎn)發(fā)給開(kāi)在端口5000的服務(wù)器，但是如果請(qǐng)求的東西再端口3000中已經(jīng)有了的話就不會(huì)再轉(zhuǎn)發(fā)到端口5000里面找了。

這種方法只能找一個(gè)，但是如果你不只是要再端口5000中找，還想在其它端口號(hào)找的話（配置多個(gè)代理），就要用下面這個(gè)方法了。

方法二

在src中添加一個(gè)setupProxy的文件（react腳手架會(huì)找到這個(gè)文件），復(fù)制如下代碼

配置之后需要在之前發(fā)送請(qǐng)求的地址localhost:3000后加/api1，表示如果在3000端口沒(méi)有找到請(qǐng)求所要的資源，就去api1所配置的代理，于是就去訪問(wèn)端口5000。如果想要配置多個(gè)代理，用逗號(hào)隔開(kāi)即可。

changeOrigin用于控制服務(wù)器收到的響應(yīng)頭中Host字段的值。在這里，如果時(shí)默認(rèn)值值，為false的話，服務(wù)器會(huì)以為這個(gè)請(qǐng)求時(shí)來(lái)自于端口為3000；但如果把它的值設(shè)置為true，此時(shí)服務(wù)器會(huì)認(rèn)為這個(gè)請(qǐng)求時(shí)來(lái)自于端口5000的（其實(shí)不是）。這個(gè)可以不寫(xiě)但是最好寫(xiě)上。

pathWrite時(shí)重寫(xiě)了請(qǐng)求路徑，其實(shí)就是剛開(kāi)始通過(guò)/api找到了這個(gè)代理，但是當(dāng)代理向端口5000發(fā)生請(qǐng)求的時(shí)候要把/api去掉，比如https://localhost:3000/api/student，如果沒(méi)有把a(bǔ)pi去掉就相當(dāng)于請(qǐng)求地址為/api/students，但實(shí)際上我們要請(qǐng)求的地址應(yīng)該是/student。

const proxy = require('http-proxy-middleware');

module.exports = function (app) {
    app.use(
        proxy('/api1', {
            target: 'http://localhost:5000',  
            changeOrigin: true,      // 默認(rèn)值是false
            pathRewrite: { '^/api1': '' }  
        }),
        proxy('/api2', {
            target: 'http://localhost:5001',
            changeOrigin: true,      // 默認(rèn)值是false
            pathRewrite: { '^/api2': '' }
        }),
    )
}