React開啟代理的方式有哪些

本篇內容介紹了“React開啟代理的方式有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

開啟代理的兩種方式

react并沒有封裝好了的ajax請求的代碼供我們直接使用，在進行交互的時候，我們需要自己封裝ajax代碼或者使用第三方ajax庫，一般我們用axios(輕量級)。

先說一下為什么需要代理？

比如說，在本地寫一個端口為5000的服務器時，當我們通過端口3000去發生請求，會出現跨域的問題（原來3000端口的ajax引擎把響應攔截了），此時可以通過代理來解決問題。所謂的代理就是一個傳遞信息的工具，端口為3000的請求發給開在3000端口的代理，代理再轉發給5000端口的服務器，在響應的時候，由于代理是沒有ajax引擎的代理，所以可以接收響應，再傳遞給開在3000端口的腳手架，從而解決了跨域的問題。

react開啟代理的兩種方式

方法一

在package.json文件中添加"proxy": "https://localhost:5000" 配置之后3000端口沒有的資源就會去端口5000找。也就是說會把把發給端口為3000的請求轉發給開在端口5000的服務器，但是如果請求的東西再端口3000中已經有了的話就不會再轉發到端口5000里面找了。

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

方法二

在src中添加一個setupProxy的文件（react腳手架會找到這個文件），復制如下代碼

配置之后需要在之前發送請求的地址localhost:3000后加/api1，表示如果在3000端口沒有找到請求所要的資源，就去api1所配置的代理，于是就去訪問端口5000。如果想要配置多個代理，用逗號隔開即可。

changeOrigin用于控制服務器收到的響應頭中Host字段的值。在這里，如果時默認值值，為false的話，服務器會以為這個請求時來自于端口為3000；但如果把它的值設置為true，此時服務器會認為這個請求時來自于端口5000的（其實不是）。這個可以不寫但是最好寫上。

pathWrite時重寫了請求路徑，其實就是剛開始通過/api找到了這個代理，但是當代理向端口5000發生請求的時候要把/api去掉，比如https://localhost:3000/api/student，如果沒有把api去掉就相當于請求地址為/api/students，但實際上我們要請求的地址應該是/student。

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

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

“React開啟代理的方式有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！