react 如何设置 代理

设置代理的方法

在React项目中设置代理通常用于解决开发环境中的跨域问题或API请求转发。以下是几种常见的方法：

1. 在 package.json 中配置代理

修改 package.json 文件，添加 proxy 字段，指向目标服务器地址：

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

重启开发服务器后，所有未匹配的请求会自动转发到该地址。

2. 使用 http-proxy-middleware 配置高级代理

创建 src/setupProxy.js 文件（Create React App项目）：

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

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

这种方式支持路径重写和更复杂的代理规则。

3. 自定义开发服务器配置

修改 webpack.config.js 或通过 react-scripts 的扩展配置：

devServer: {
  proxy: {
    '/api': {
      target: 'http://your-api-server.com',
      secure: false
    }
  }
}

适用于需要自定义Webpack配置的项目。

4. 环境变量配置

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

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

然后在代码中通过 process.env.REACT_APP_API_BASE_URL 引用。

注意事项

• 生产环境代理需通过Nginx或后端服务实现
• 路径重写时注意避免无限循环
• 启用 changeOrigin 可修改请求头中的Host字段
• 配置后需重启开发服务器才能生效