Create React App 项目中的代理配置

在使用 create-react-app 脚手架创建的 React 项目中，开发环境下可以通过配置代理解决前端请求后端接口时的跨域问题。

CRA 中常见的代理配置方式有两种：

• 在 package.json 中配置简单代理
• 使用 http-proxy-middleware 配置复杂代理

一、简单代理

如果项目中只有一个后端服务地址，可以直接在 package.json 中添加 proxy 字段。

示例：

{
  "proxy": "http://localhost:5000"
}

配置完成后，前端请求时不要写完整的后端地址，而是直接写接口路径。

示例：

fetch('/api/users')

开发环境下，请求会被代理到：

http://localhost:5000/api/users

注意：修改 package.json 后，需要重启开发服务器。

二、复杂代理

如果项目中需要代理多个接口地址，或者需要路径重写、修改请求源等功能，可以使用 http-proxy-middleware。

先安装依赖：

npm install http-proxy-middleware --save

或者：

yarn add http-proxy-middleware

然后在 src 目录下新建 setupProxy.js 文件：

const { createProxyMiddleware } = require('http-proxy-middleware');

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

前端请求：

fetch('/api/users')

会被代理到：

http://localhost:5000/api/users

三、路径重写

如果前端请求路径中带有 /api，但后端接口实际没有 /api 前缀，可以通过 pathRewrite 去掉该前缀。

示例：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
      pathRewrite: {
        '^/api': '',
      },
    })
  );
};

此时前端请求：

fetch('/api/users')

会被代理到：

http://localhost:5000/users

四、注意事项

1. CRA 的代理配置只在开发环境生效。
2. 修改代理配置后，需要重启开发服务器。
3. 生产环境不会使用 CRA 的开发代理。
4. 生产环境通常需要在 Nginx、后端服务或部署平台中配置反向代理。
5. 前端请求接口时，建议使用相对路径，例如 /api/users，不要直接写完整后端地址。