react如何设置代理

在 React 项目中设置代理可以通过以下方法实现，主要用于解决开发环境下的跨域问题或 API 请求转发：

方法一：通过 package.json 配置代理

在项目根目录的 package.json 中添加 proxy 字段，指定目标服务器地址：

{
  "proxy": "http://your-api-server.com"
}

• 仅适用于开发环境（npm start）。
• 所有未匹配静态资源的请求会自动转发到目标地址。
• 不支持多代理或路径重写。

方法二：使用 http-proxy-middleware 配置高级代理

安装中间件：

npm install http-proxy-middleware --save-dev

在 src 目录下创建 setupProxy.js 文件（无需手动引入，React 会自动加载）：

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

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

• 支持多代理配置，通过路径匹配（如 /api）。
• changeOrigin 修改请求头中的 Host 为目标地址。
• pathRewrite 可重写请求路径（如移除 /api 前缀）。

方法三：通过环境变量配置开发服务器

在 .env.development 文件中定义代理目标：

REACT_APP_API_URL=http://your-api-server.com

然后在 setupProxy.js 中动态读取：

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

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: process.env.REACT_APP_API_URL,
      changeOrigin: true,
    })
  );
};

注意事项

• 生产环境需通过后端服务（如 Nginx）处理代理，前端代码无法直接配置。
• 修改代理配置后需重启开发服务器（npm start）。
• 使用 http-proxy-middleware 时确保版本与 React 兼容（CRA 5+ 需使用 v2+）。

通过上述方法，可灵活应对本地开发中的跨域或 API 转发需求。