EC2实例上React应用与同服务器后端通信失败问题排查

1. 后端服务器监听地址限制 #

你的后端代码中，app.listen仅指定了端口，默认会绑定到localhost(127.0.0.1)，这意味着后端服务只能在EC2实例内部访问，外部（包括前端页面）无法通过公网IP连接到它。

修改方案：
将监听地址改为0.0.0.0，允许所有网络接口访问：

const server = app.listen(PORT, '0.0.0.0', () => {
  console.log(`Server is running on http://0.0.0.0:${PORT}`);
});

2. 前端API地址配置错误 #

前端配置文件里的config.apiUrl设为http://localhost，本地测试时没问题，但部署后前端页面在用户浏览器中运行，localhost指向用户自己的本地机器，而非EC2实例的公网IP，导致请求发错目标。

修改方案：

• 方案一：将config.apiUrl改为EC2实例的公网IP（如你的54.86.29.70），端口保持3001：

  // 前端config文件
  export const config = {
    apiUrl: 'http://54.86.29.70',
    apiPort: 3001
  };
  

• 方案二（生产环境推荐）：若前后端部署在同一EC2实例，建议使用相对路径调用API，同时用Nginx等反向代理统一处理。比如把请求改为/api/deleteBox，再通过Nginx将/api前缀的请求转发到localhost:3001。

3. EC2安全组未开放后端端口 #

EC2安全组默认拦截外部对非默认端口的访问，你的后端使用3001端口，必须添加入站规则：

• 类型：自定义TCP
• 端口范围：3001
• 源：0.0.0.0/0（或限制为前端访问的IP，提升安全性）

若安全组未开放此端口，前端请求会被防火墙直接拦截，导致CORS请求失败（连接根本无法建立）。

4. 前端代理配置注意事项 #

package.json中配置的代理仅在本地开发环境（npm start启动的开发服务器）生效，生产环境构建后的静态文件不会使用该配置。部署生产环境时，不能依赖此配置，必须调整API地址或使用反向代理。

验证步骤 #

1. 重启后端服务，确认监听地址为0.0.0.0
2. 在本地终端用curl测试后端API是否可通过公网IP访问：

   curl -X POST http://54.86.29.70:3001/api/addBox -H "Content-Type: application/json" -d '{"name":"test"}'
   

   若能正常返回结果，说明后端服务和安全组配置无问题。
3. 修改前端API地址后重新构建部署，测试页面功能。

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