前端react如何配置反向代理

在React中配置反向代理

使用create-react-app创建的项目可以通过http-proxy-middleware配置反向代理，解决开发环境跨域问题。

方法一：通过setupProxy.js配置

在src目录下创建setupProxy.js文件：

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

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

方法二：修改package.json

在package.json中添加proxy字段：

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

配置多代理

对于多个API端点的情况，setupProxy.js可以配置多个代理规则：

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

module.exports = function(app) {
  app.use(
    '/api1',
    createProxyMiddleware({
      target: 'http://server1.com',
      changeOrigin: true
    })
  );

  app.use(
    '/api2',
    createProxyMiddleware({
      target: 'http://server2.com',
      changeOrigin: true
    })
  );
};

生产环境配置

生产环境需要通过web服务器(Nginx/Apache)配置反向代理。Nginx示例配置：

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

注意事项

• 开发环境配置只对npm start有效
• 修改代理配置后需要重启开发服务器
• 路径重写规则根据实际API结构调整
• 生产环境必须通过服务器配置，不能依赖前端代理