react项目如何做反向代理

反向代理的作用

反向代理可以帮助开发阶段解决跨域问题，或在生产环境隐藏真实服务器信息。React项目通常结合开发服务器或Nginx实现反向代理。

开发环境配置（Create React App）

在package.json中配置proxy字段：

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

或通过src/setupProxy.js自定义配置（需安装http-proxy-middleware）：

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

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

生产环境Nginx配置

修改Nginx配置文件（通常位于/etc/nginx/conf.d/default.conf）：

server {
    listen 80;
    server_name your-domain.com;

    location / {
        root /path/to/react/build;
        try_files $uri /index.html;
    }

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

自定义开发服务器配置

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

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

注意事项

• 开发环境修改代理配置后需重启开发服务器
• 生产环境修改Nginx配置后需执行nginx -s reload
• 路径重写规则需根据实际API结构调整
• HTTPS环境需配置SSL证书和相应代理头