在AWS EC2部署.NET Core+React/Angular后前后端通信问题求助

问题场景 #

在AWS EC2 Linux上部署了Nginx托管的Angular/React前端，以及Docker运行的.NET Core后端，前端无法通过http://localhost:port在EC2内部调用后端，尝试两种配置均报错：

• 使用https://example.com:port调用：超时（负载均衡器仅监听80/443端口，后端端口未对外暴露）
• 使用http://ec2-endpoint:port调用：浏览器报HTTP/HTTPS混合内容错误（前端通过HTTPS加载，调用HTTP接口违反安全策略）

核心解决方案 #

方案一：EC2内部通信（推荐，安全高效） #

通过Nginx反向代理实现前后端内部通信，避免跨域和混合内容问题：

1. 确保后端容器与EC2主机连通

   • 启动Docker容器时，要么使用--network host模式直接共享主机网络，要么通过-p 主机端口:容器端口将后端端口映射到EC2主机。

2. 修改Nginx配置添加反向代理规则
   在Nginx的站点配置文件中添加后端API转发规则：

   server {
       listen 80;
       server_name example.com;
   
       # 前端静态资源路由
       location / {
           root /usr/share/nginx/html;
           try_files $uri $uri/ /index.html;
       }
   
       # 后端API反向代理
       location /api/ {
           proxy_pass http://localhost:后端主机端口/; # 若用bridge网络，需确保主机能访问容器映射端口
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_set_header X-Forwarded-Proto $scheme;
       }
   }
   

3. 前端API地址配置
   将前端API请求地址改为相对路径/api，无需填写完整域名。此时前端请求会通过Nginx转发到后端，完全在EC2内部完成通信，浏览器不会触发CORS检查。

4. 简化CORS配置
   因前后端通过同域名访问，可关闭后端CORS配置，或仅保留本地开发环境的允许源。

方案二：子域名独立部署（适合外部需直接访问后端的场景） #

通过配置子域名api.example.com将后端暴露到公网：

1. 配置子域名与负载均衡器
   在Route 53中添加A记录，将api.example.com指向现有应用负载均衡器。

2. 扩展负载均衡器配置

   • 在负载均衡器中新增HTTPS（443端口）监听规则，将请求转发到后端EC2的目标组（需配置目标组的EC2实例及对应后端端口）。
   • 确保ACM证书包含api.example.com（可在原有证书中添加该子域名，或重新申请覆盖主域名和子域名的证书）。

3. 前端与后端配置

   • 前端API地址改为https://api.example.com
   • 后端CORS配置添加https://example.com为允许源

关键注意事项 #

• 安全组配置：EC2安全组需允许自身（127.0.0.1/32）访问后端端口；若用负载均衡器，目标组安全组需允许负载均衡器安全组访问后端端口。
• Docker网络：使用bridge网络时，需确认EC2主机防火墙（iptables）允许内部访问容器映射的端口。
• 混合内容规避：HTTPS页面严禁调用HTTP接口，所有外部接口必须使用HTTPS协议。

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