Angular+SpringBoot部署AWS EC2，HTTPS配置遇证书通用名无效错误求助

核心问题分析 #

1. 混合内容错误根源：前端通过负载均衡器的HTTPS访问，但后端调用使用HTTP或EC2公网IP，浏览器会阻止"安全页面加载非安全资源"的混合内容请求。
2. 证书域名不匹配错误（ERR_CERT_COMMON_NAME_INVALID）：你给后端配置的HTTPS证书绑定的是域名，但前端调用后端用的是EC2公网IP——证书的通用名称（CN）或主题备用名称（SAN）中未包含该IP，浏览器判定证书无效。单独访问后端API正常，应该是你用域名访问的（证书匹配），但前端用IP调用就触发了不匹配问题。

正确配置逻辑（推荐AWS ALB SSL终止方案） #

AWS负载均衡器（ALB）适合作为统一的HTTPS入口，负责SSL终止（处理证书解密），后端EC2上的前端、后端均使用HTTP服务即可。这种方案无需给后端单独配置HTTPS，避免证书冗余和匹配问题，架构更简洁：

• ALB接收用户的HTTPS请求，解密后转成HTTP请求转发给EC2内的服务
• 前端Angular通过ALB的HTTPS域名访问，API请求直接指向该域名的特定路径（如/api/*），由ALB转发到后端SpringBoot

具体解决步骤 #

1. 恢复后端为HTTP服务 #

修改SpringBoot配置文件，关闭SSL，改回HTTP端口（比如8080）：

server:
  port: 8080
# 移除所有ssl相关配置

2. 配置ALB监听与转发规则 #

• 确保ALB的443端口（HTTPS）已绑定ZeroSSL的域名证书
• 添加两条转发规则：
  • 规则1：路径匹配/api/*（根据你的后端API前缀调整），转发到SpringBoot的目标组（端口8080）
  • 规则2：默认路径/*，转发到前端Nginx的目标组（端口80）

3. 修改Angular的API请求地址 #

将前端API请求的baseUrl改为你的域名+API前缀，比如：

// Angular环境配置文件（environment.prod.ts）
export const environment = {
  production: true,
  apiBaseUrl: 'https://yourdomain.com/api'
};

这样所有API请求都会先发送到ALB，由ALB转发到后端SpringBoot，全程HTTPS，无混合内容或证书问题。

可选方案（同EC2实例内反向代理） #

如果前后端部署在同一台EC2实例，也可以通过Nginx反向代理后端API：

1. 修改Nginx配置，添加反向代理规则：

server {
  listen 80;
  server_name localhost;

  # 前端静态文件路由
  location / {
    root /usr/share/nginx/html;
    try_files $uri $uri/ /index.html;
  }

  # 后端API反向代理
  location /api {
    proxy_pass http://localhost:8080;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

2. Angular的API请求baseUrl改为/api（相对路径），这样请求会先到Nginx，再转发到后端，内部HTTP通信不会被浏览器拦截。

为什么之前的方法无效？ #

• upgrade-insecure-requests meta标签：仅能将页面内的HTTP请求升级为HTTPS，但如果后端没有配置对应域名的HTTPS（比如用IP访问），证书不匹配的问题依然存在。
• 后端单独配置HTTPS：前端调用后端用IP时，证书绑定的是域名，IP不在证书的SAN/CN列表中，浏览器必然判定证书无效。

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