EC2实例上React与Node后端Nginx路由及连接故障排查

前端代码在用户浏览器中执行，localhost:3001指向的是用户本地设备，而非AWS EC2实例上的后端服务——这是导致连接失败的根本原因。

方案1：Nginx反向代理后端请求（推荐，安全） #

利用已部署的Nginx，将前端发往特定路径的请求转发到EC2本地的3001端口，无需暴露后端端口到公网，规避安全风险。

1. 修改Nginx配置 #

找到Nginx配置文件（通常在/etc/nginx/nginx.conf或/etc/nginx/sites-available/目录下），在server块中添加反向代理规则：

server {
    listen 80;
    server_name 你的域名或负载均衡IP;

    # 转发前端静态资源请求到React服务（8080端口）
    location / {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # 转发后端API请求到Node服务（3001端口）
    location /api/ {
        proxy_pass http://localhost:3001/; # 末尾斜杠保证路径正确映射
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

2. 调整前端axios请求地址 #

将前端代码中localhost:3001替换为/api，示例：

// 原请求
axios.get('http://localhost:3001/users')

// 修改后
axios.get('/api/users')

3. 重启Nginx生效配置 #

sudo nginx -s reload

若配置报错，可先执行sudo nginx -t检查语法。

方案2：直接暴露后端端口（仅测试用，不推荐生产） #

如果仅用于测试，可临时开放后端端口，但生产环境禁止使用：

• 修改Node后端监听地址为0.0.0.0（默认localhost仅允许EC2本地访问）：

  app.listen(3001, '0.0.0.0', () => {
      console.log('后端服务运行在0.0.0.0:3001');
  });
  

• 配置AWS EC2安全组，允许入站流量访问3001端口（仅测试场景开放）。
• 前端请求地址改为http://你的EC2公网IP或域名:3001，同时在Node后端配置CORS解决跨域：

  const cors = require('cors');
  app.use(cors({ origin: '你的前端域名或IP' })); // 生产环境务必限制允许的域名
  

• 前端运行在客户端浏览器，所有localhost指向用户本地设备，而非服务器。
• 生产环境必须使用Nginx反向代理，禁止直接暴露后端端口，降低被攻击风险。
• 若启用HTTPS，需确保Nginx配置SSL证书，前端请求统一使用HTTPS，避免混合内容错误。

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