如何使用React.js设置代理后端服务器

在本文中，我们将学习如何使用React.js代理后端服务器。有时候，在使用React.js构建Web应用程序时，您可能需要请求后端服务器。但是，如果后端服务器不允许跨源资源共享（CORS），在前端应用程序请求时可能会遇到错误。在这种情况下，您可以使用代理服务器将前端应用程序的请求转发给后端服务器。在React中，您可以使用一个名为”HTTP-proxy-middleware”的软件包来实现这一点。

先决条件： 为了按照本指南操作，您需要在计算机上安装Node.js和npm（Node Package Manager）。

创建ReactJS应用程序并导入所需模块：

步骤1： 使用以下命令创建一个新的React.js应用程序。

npx create-react-app my-app

步骤2： 使用以下命令安装 “HTTP-proxy-middleware” 包

npm install http-proxy-middleware --save

步骤3： 在React.js应用的“src”目录中创建一个名为“setupProxy.js”的新文件。这些信息将用于配置名称服务器。

步骤4： 将以下代码添加到 “setupProxy.js” 文件中。

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
    app.use(
        '/api',
        createProxyMiddleware({
            target: 'http://localhost:5000',
            changeOrigin: true,
        })
    );
};

在这段代码中，我们将代理服务器设置为向后端服务器发送请求的路径为“/api”，该后端服务器运行在”http://localhost:5000″上。将”changeOrigin”选项设置为true允许后端服务器接收带有原始主机头的请求。

步骤5： 更新你的React.js应用程序以使用服务器名称。例如，如果你想使用“fetch” API向后端服务器发出请求，你可以使用以下代码。

fetch('/api/data')
  .then(response => response.json())
.then(data => console.log(data));

在这段代码中，我们请求路径为 “/api/data” 这个请求将会被发送给代理服务器，然后由代理服务器转发到后端服务器。后端服务器返回的响应将会被转换为JSON格式并保存到控制台中。

项目结构:

如何使用React.js设置代理后端服务器

示例： 这是在React.js应用程序中使用代理服务器的示例。

import React, { useEffect, useState } from 'react'; 
function App() { 
    const [data, setData] = useState(null); 
  
    useEffect(() => { 
        fetch('/api/data') 
            .then(response => response.json()) 
            .then(data => setData(data)); 
    }, []); 
    return ( 
        <div> 
            {data ? ( 
                <ul> 
                    {data.map(item => ( 
                        <li key={item.id}>{item.name}</li> 
                    ))} 
                </ul> 
            ) : ( 
                <p>Loading...</p> 
            )} 
        </div> 
    ); 
} 
export default App;

在这段代码中，我们使用了 hooks “useState” 和 “useEffect” 来向后端服务器发送请求，并通过响应更新状态的内容。然后我们将信息呈现在列表中。当组件第一次加载时，会出现“Loading…”的消息，直到数据从后端服务器返回为止。

参考： https://create-react-app.dev/docs/proxying-api-requests-in-development/