如何为Angular 17应用生成本地SSL证书并解决连接不信任问题

问题背景 #

为Angular 17（基于Vite开发服务器）配置本地SSL时，通过OpenSSL生成自签名证书或RootCA后，浏览器仍提示"你的连接不是私密连接"，且不想依赖mkcert工具（需全员安装，对Windows用户不友好）。

核心原因 #

浏览器默认不信任**未被系统/浏览器信任列表收录的证书颁发机构（CA）**签发的证书。之前的操作要么是直接生成自签名的localhost证书（无CA背书），要么生成了RootCA但未完成「导入信任」+「用RootCA签发localhost证书」两个关键步骤。

分步解决方案 #

1. 生成自定义RootCA #

执行以下OpenSSL命令生成自签名的RootCA（有效期1024天，满足长期开发需求）：

# 生成RootCA密钥和证书
openssl req -x509 -nodes -new -sha256 -days 1024 -newkey rsa:2048 -keyout RootCA.key -out RootCA.pem -subj "/C=US/CN=Local-Development-Root-CA"
# 转换为浏览器兼容的crt格式
openssl x509 -outform pem -in RootCA.pem -out RootCA.crt

2. 生成由RootCA签名的localhost证书 #

不能直接用localhost密钥自签名，必须用上面生成的RootCA来签发证书，同时添加SAN扩展适配现代浏览器校验要求：

# 1. 生成localhost私钥
openssl genpkey -algorithm RSA -out localhost.key -pkeyopt rsa_keygen_bits:2048

# 2. 生成localhost证书签名请求（CSR）
openssl req -new -key localhost.key -out localhost.csr -subj "/C=US/ST=State/L=City/O=LocalDev/OU=DevTeam/CN=localhost"

# 3. 创建扩展配置文件（解决Chrome等浏览器的SAN校验问题）
echo "authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names

[alt_names]
DNS.1 = localhost
IP.1 = 127.0.0.1" > localhost.ext

# 4. 用RootCA签发localhost证书（有效期365天）
openssl x509 -req -days 365 -in localhost.csr -CA RootCA.pem -CAkey RootCA.key -CAcreateserial -out localhost.crt -extfile localhost.ext

3. 将RootCA导入系统信任存储 #

这是解决"连接非私密"的关键步骤，需根据操作系统操作：

• Windows：双击RootCA.crt → 「安装证书」→ 选择「本地计算机」→ 「将所有证书放入下列存储」→ 浏览选择「受信任的根证书颁发机构」→ 完成导入。
• macOS：双击RootCA.crt → 打开钥匙串访问，找到证书后右键→「显示简介」→ 信任→「使用此证书时」选择「始终信任」。
• Linux：将RootCA.crt复制到/usr/local/share/ca-certificates/，执行sudo update-ca-certificates。

4. 配置Angular开发服务器 #

在angular.json的serve配置中更新SSL参数：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "serve": {
          "options": {
            "ssl": true,
            "sslKey": "./localhost.key",
            "sslCert": "./localhost.crt"
          }
        }
      }
    }
  }
}

验证步骤 #

1. 重启浏览器（确保信任存储生效）
2. 启动Angular开发服务器：ng serve
3. 访问https://localhost:4300，浏览器应不再提示"连接非私密"错误。

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