react如何设置反向代理

在React中设置反向代理

React项目通常使用create-react-app（CRA）搭建，可以通过修改配置文件或使用第三方库实现反向代理。

使用CRA内置的proxy配置

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

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

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

使用http-proxy-middleware

对于更复杂的代理需求，可以创建src/setupProxy.js文件（无需导入，CRA自动加载）：

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

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

这种方式支持路径重写、多代理规则等高级配置。

生产环境配置

生产环境需要配置Web服务器（如Nginx）作为反向代理。示例Nginx配置：

location /api/ {
  proxy_pass http://backend-server/;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
}

自定义开发服务器

使用webpack-dev-server时，可在webpack.config.js中配置：

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:3001',
      secure: false
    }
  }
}

注意：修改配置后需要重启开发服务器才能生效。生产环境部署时，代理配置应通过服务器软件（Nginx/Apache）实现，而非前端代码。