如何将本地React应用连接到远程AWS EC2服务器上的REST API？

从最常见的配置问题入手逐一排查：

1. 检查EC2安全组规则 #

• 确保API使用的端口（如3000、8080）在安全组入站规则中开放，来源可暂时设为0.0.0.0/0（测试用，后续建议限制为你的本地公网IP以提升安全性）。
• 验证方式：登录EC2控制台，进入对应实例的安全组页面，确认目标端口的入站规则存在且来源配置正确。

2. 检查EC2服务器本地防火墙 #

若服务器启用了ufw或iptables等防火墙工具，需手动开放API端口：

• 针对ufw：执行命令 sudo ufw allow <你的API端口>，再执行 sudo ufw reload 生效规则。
• 针对iptables：执行命令 sudo iptables -A INPUT -p tcp --dport <你的API端口> -j ACCEPT，之后保存规则（如Ubuntu系统可执行 sudo iptables-save > /etc/iptables/rules.v4）。

3. 确认API绑定的地址 #

本地运行时绑定localhost可行，但部署到EC2后，API必须绑定到0.0.0.0或服务器的私有/公网IP，不能仅绑定localhost（否则仅服务器内部可访问）。

• 示例（Node.js Express应用）：启动代码需改为 app.listen(<端口>, '0.0.0.0', () => {...})。
• 验证方式：在EC2服务器终端执行 netstat -tulpn | grep <端口>，查看输出的地址是否为0.0.0.0或非127.0.0.1的IP。

4. 测试基础连通性 #

先跳过React，直接验证API的外部可达性：

• 在本地终端执行 curl http://<EC2公网IP>:<API端口>/<接口路径>。
• 或用Postman发送请求，观察是否能正常响应。若此处超时，说明安全组、防火墙或API绑定配置存在问题；若能正常响应，再排查React端配置。

5. React端Axios配置注意事项 #

• 确保Axios的baseURL设置正确：axios.defaults.baseURL = 'http://<EC2公网IP>:<API端口>'。
• 若React本地应用使用HTTPS（如create-react-app默认的https://localhost:3000），而API是HTTP协议，浏览器会拦截混合内容，需启动React时禁用HTTPS：HTTPS=false npm start。
• 跨域问题：若API未配置CORS，浏览器会报错。需在API服务中添加CORS中间件，比如Express的cors包：

  const cors = require('cors');
  app.use(cors()); // 测试阶段允许所有来源，生产环境建议限制指定域名
  

6. 其他排查点 #

• 确认EC2实例的公网IP是否正确，若未绑定弹性IP，重启实例后IP会变化。
• 检查API服务是否正常运行：在EC2终端执行 ps aux | grep <API进程名>，或用systemctl status <服务名>（若为systemd管理的服务）。

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