Create React App 在开发环境中代理 API 请求

在开发 React 应用程序时，通常会需要与后端 API 进行通信。为了避免跨域问题，我们可以在 Create React App 中设置代理来转发 API 请求。

步骤

步骤一：安装 http-proxy-middleware 模块

在项目根目录下，运行以下命令安装 http-proxy-middleware 模块：

npm install http-proxy-middleware --save

步骤二：创建 setupProxy.js 文件

在项目的 src 目录下创建一个名为 setupProxy.js 的文件，并添加以下代码：

// www.javascriptcn.com code example
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000', // 后端 API 地址
      changeOrigin: true,
    })
  );
};

步骤三：重新启动开发服务器

在终端中运行以下命令重新启动开发服务器：

npm start

现在，你可以在 React 组件中使用 /api 路径来访问后端 API，例如：

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

通过以上步骤，你已经成功在开发环境中设置了代理来转发 API 请求，方便与后端进行通信。