AWS EC2部署Angular/Node应用遇无法连接服务器错误排查

1. 前端接口地址配置错误 #

• 生产环境前端代码中硬编码的http://localhost:8080指向的是访问页面的用户本地设备，而非EC2服务器，浏览器会直接向用户本地8080端口发起请求，必然无法连通后端。
• 即使替换为EC2公网IP也属于硬编码，后续更换IP、域名需要重新构建打包，正确做法是使用相对路径调用接口，修改后重新执行ng build --prod打包：

const AUTH_API = '/api/authPsi/';

该配置会自动让请求走当前页面的域名/IP+80端口，交给Nginx转发到后端，无需写死地址。

2. Nginx站点配置逻辑错误 #

当前配置将所有80端口的请求都代理到Node后端，导致Angular静态打包文件完全无法被访问，必须拆分为两个独立的location块：

• 前端静态资源请求直接返回dist目录下的文件
• 仅/api/开头的接口请求代理到Node后端8080端口
  修正后的Nginx配置参考：

server {
   listen         80 default_server;
   listen         [::]:80 default_server;
   server_name    你的EC2公网IP或绑定域名;
   root           /dist/psiquests;
   index          index.html index.htm;

   # 处理前端静态资源请求，适配Angular单页路由刷新场景
   location / {
       try_files $uri $uri/ /index.html;
   }

   # 处理后端接口请求
   location /api/ {
       proxy_pass http://127.0.0.1:8080;
       proxy_http_version 1.1;
       proxy_set_header Upgrade $http_upgrade;
       proxy_set_header Connection 'upgrade';
       proxy_set_header Host $host;
       proxy_cache_bypass $http_upgrade;
   }
}

修改后先执行nginx -t校验配置合法性，再执行systemctl reload nginx使配置生效。

3. 后端CORS配置适配错误 #

当前CORS配置允许的http://localhost:4200仅适用于本地开发场景，生产环境下前端访问地址完全不匹配。

• 如果已经通过Nginx实现同源反向代理，前后端请求属于同一域名，本身不会触发跨域，可直接移除Express中的CORS配置，减少不必要的校验。
• 若确实需要保留CORS配置，必须将origin修改为前端实际访问的地址，例如：

// 修正后的CORS配置（可选）
var corsOptions = {
  origin: "http://你的EC2公网IP或绑定域名"
};

4. 补充排查项 #

• 在EC2服务器内部执行curl http://127.0.0.1:8080/api/authPsi/signin，确认Node后端服务正常运行
• 检查AWS安全组入站规则，确认已开放80端口的访问权限
• 确认dist目录下的打包文件已经更新为修改接口配置后的最新版本，未使用旧的打包产物

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