如何配置Nginx代理服务器以部署React应用与Node.js后端服务？

原配置核心问题 #

• server_name字段错误：不需要携带端口（如157.245.3.88:3000属于错误写法），该字段仅用于匹配请求的Host头，端口由listen指令指定
• 端口监听冲突：两个server块均监听80端口，Nginx无法正确区分请求路由目标
• 冗余配置：后端的/order-checkout与/api location可合并简化，无需重复设置代理头
• 跨域根源：前端直接访问3001端口触发跨域，需通过Nginx实现同域代理

修复后的完整Nginx配置 #

server {
    listen 80;
    listen [::]:80;
    server_name 157.245.3.88;

    # 代理React前端服务（3000端口）
    location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_set_header X-NginX-Proxy true;
        proxy_pass http://127.0.0.1:3000;
    }

    # 代理Node后端API接口（3001端口）
    location ~ ^/(api|order-checkout) {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_set_header X-NginX-Proxy true;
        proxy_pass http://127.0.0.1:3001;
    }
}

关键配置说明 #

1. 统一路由：用单个server块监听80端口，通过location规则区分前端与后端请求，避免端口冲突
2. 消除跨域：前端代码中所有后端请求改为/api/xxx或/order-checkout/xxx，不再直接访问3001端口，同域名下不会触发CORS限制
3. 简化匹配规则：用正则表达式~ ^/(api|order-checkout)合并后端路径代理，减少冗余配置
4. 路径拼接优化：proxy_pass末尾不添加路径后缀，Nginx会自动将请求路径完整转发到后端服务

验证与调试步骤 #

1. 检查配置语法：执行sudo nginx -t，确保无语法错误
2. 重启Nginx：执行sudo nginx -s reload生效配置
3. 确认服务可达：用curl http://127.0.0.1:3000和curl http://127.0.0.1:3001/api验证React与Node服务是否正常运行
4. 前端测试：访问http://157.245.3.88，检查接口请求是否正常，无CORS报错

内容的提问来源于stack exchange，提问作者Sasha