Angular 5调用HTTPS接口时如何处理服务端自签名证书问题

这个坑我之前踩过！问题出在浏览器的证书信任逻辑上——你手动给前端域名https://app-name.my.domain加了证书例外，但这个信任是按域名独立生效的，不会自动覆盖你的API域名https://app-api-name.my.domain，所以前端发起跨域API请求时，浏览器依然会拒绝信任API的自签名证书。

下面是几个实用的解决办法，按需选择：

1. 直接给API域名添加证书例外 #

这是最快速的临时方案，适合开发/测试场景：

• 打开浏览器，直接访问https://app-api-name.my.domain
• 按照浏览器提示完成证书例外的添加操作
• 刷新前端页面后，API请求就能正常发起了

2. 为两个域名生成同一张自签名证书 #

如果不想每次都给不同域名加例外，可以生成一张包含两个域名的证书：

• 使用openssl生成带Subject Alternative Name（SAN）的证书，命令如下：

  openssl req -x509 -newkey rsa:4096 -keyout app-key.pem -out app-cert.pem -days 365 \
    -subj "/CN=app-name.my.domain" \
    -addext "subjectAltName=DNS:app-name.my.domain,DNS:app-api-name.my.domain"
  

• 在Apache2的两个虚拟主机配置（前端和API）中，都配置使用这张app-cert.pem和app-key.pem
• 这样用户只需要添加一次证书例外，两个域名就能同时被信任

3. 将证书导入浏览器的系统信任根目录（推荐长期测试环境） #

把自签名证书导入到浏览器的受信任根证书颁发机构列表，这样所有使用该证书的域名都会自动被信任：

• 找到你的证书文件（比如app-cert.pem）
• 打开浏览器设置，找到「证书管理」入口（比如Chrome：设置 → 隐私和安全 → 安全 → 管理证书）
• 选择「受信任的根证书颁发机构」标签，导入证书文件
• 重启浏览器后，前端和API的请求都不会再出现证书信任问题

补充说明 #

浏览器的证书例外机制是严格绑定单个域名的，哪怕两个域名属于同一主域，也不会共享信任状态。这是浏览器的安全设计，防止恶意网站利用信任扩散的漏洞。

内容的提问来源于stack exchange，提问作者Juan I. Morales Pestana