如何在本地通过SSL证书运行Angular 7+项目（https://localhost:4200）

阿华AIGC实验室

2026-5-14

解决Angular 7+本地HTTPS运行的浏览器访问问题

我来帮你搞定这个问题！你已经尝试了两种配置SSL的方式，服务日志也显示正常启动，但浏览器访问出问题，90%以上的概率是自签名证书不被浏览器信任导致的，下面是一步步的排查和解决方法：

先明确浏览器的具体报错

先看看浏览器地址栏旁边的警告图标，点击后查看详细错误信息，常见的是 NET::ERR_CERT_AUTHORITY_INVALID 或者“您的连接不是私密连接”，这都是证书信任问题。

解决方法：

1. 信任你的SSL证书

不管你用的是自己生成的证书（方法1）还是browser-sync的默认证书（方法2），都需要手动让系统信任它：

Windows系统：
找到你的server.crt文件，双击打开 → 点击「安装证书」 → 选择「本地计算机」（如果提示权限就点确定） → 选择「将所有证书放入下列存储」 → 点击「浏览」，选择「受信任的根证书颁发机构」 → 完成导入流程。
Mac系统：
双击server.crt文件，它会自动打开「钥匙串访问」 → 在「登录」分类里找到刚导入的证书 → 右键点击它选择「显示简介」 → 切换到「信任」标签 → 把「使用此证书时」改成「始终信任」 → 关闭窗口时输入密码确认。
Linux系统：
不同发行版略有差异，比如Ubuntu可以把server.crt复制到/usr/local/share/ca-certificates/，然后运行sudo update-ca-certificates。

2. 验证SSL配置的正确性

如果用的是angular.json配置：
检查sslKey和sslCert的相对路径是否正确，还要记得开启ssl: true，比如证书放在项目根目录的certs文件夹里，配置应该是：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "projects": {
    "<PROJECT-NAME>": {
      "architect": {
        "serve": {
          "options": {
            "ssl": true,
            "sslKey": "./certs/server.key",
            "sslCert": "./certs/server.crt"
          }
        }
      }
    }
  }
}

如果用命令行启动：
确认证书路径是否正确，比如Windows下路径要用正斜杠或者双反斜杠，示例命令：

ng serve --ssl true --ssl-key ./node_modules/browser-sync/lib/server/certs/server.key --ssl-cert ./node_modules/browser-sync/lib/server/certs/server.crt

3. 清除浏览器缓存和SSL状态

有时候浏览器缓存了旧的证书信息，导致新证书不生效：

Chrome/Firefox：按Ctrl+Shift+Delete（Windows）或Cmd+Shift+Delete（Mac），勾选「缓存的图像和文件」以及「SSL证书缓存」（不同浏览器选项名略有差异），然后清除，重启浏览器再访问。

4. 给Firefox添加证书例外

如果Chrome配置后还是有问题，可以试试Firefox：
访问https://localhost:4200时，点击「高级」 → 「接受风险并继续」，Firefox会直接添加这个域名的证书例外，不用系统级信任。

进阶：生成自定义的可信自签名证书

如果上面的方法还是不行，建议自己生成一个针对localhost的自签名证书：

先安装OpenSSL（Windows可以下载预编译版本，Mac/Linux一般自带）

打开终端，进入项目根目录，依次执行：

# 生成私钥
openssl genrsa -out server.key 2048
# 生成证书签名请求（Common Name填localhost）
openssl req -new -key server.key -out server.csr
# 生成有效期1年的自签名证书
openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt