默认使用 http 运行 Angular，如何使用 https 运行 Angular？

Question

默认情况下，如果我们运行 Angular 应用程序，它们会使用

http

运行（例如，在

http://localhost:4200

上）。

如何从

http

转换为使用

https

？

Answer 1

简单的修复方法是代替运行：

ng s -o

使用额外的参数运行它：

ng s -o --ssl true

它将在

https://localhost:4200

上运行。但是，如果您有

.crt

和

.key

文件，请也添加该参数。

您将看到一个以 https 开头的浏览器，尽管它会显示“不安全”作为警告。

---

如果您只想在 https 上运行并且不关心“不安全”消息，这就足够了。如果您确实关心，请继续执行进一步的说明。

ng s -o --ssl true --ssl-key <path to key file>  --ssl-cert <path to crt file>

或给出

.key

和

.crt

文件的相对路径。

如果您不想每次都提供这些参数或运行例如完整的 NGINX 服务器，请根据 Angular 版本在

angular.json

或

angular-cli.json

中添加这些参数：

"serve": 
 {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": 
      {
        "browserTarget": "ideationapp:build",
        "ssl": true,
        "sslKey": "ssl/server.key",
        "sslCert": "ssl/server.crt",
      }
}

如果您没有

sslkey

 和 

sslcert

 文件，则不需要 

.key

和

.crt

。

在这里，我假设这两个文件都位于 src.txt 所在的

ssl

目录中。现在，仅运行

ng s -o

就足以通过

angular.json

文件使用证书。

---

如何为本地主机创建仅适用于您的计算机或仅适用于一个用户的临时修复。

要求：

1. Git bash（在此处下载）

现在转到 Git bash 并一次键入此命令

git clone https://github.com/RubenVermeulen/generate-trusted-ssl-certificate.git(cloned to local computer)
cd generate-trusted-ssl-certificate(Going to application path)
bash generate.sh(starting shell script wher we called openssl)

克隆的应用程序使用 openssl（用于保护计算机网络通信免遭窃听或需要识别另一端身份的应用程序的软件库）生成 .crt 和 .key 文件

它将创建

server.key

和

server.crt

文件。

现在点击 server.crt

适用于 OS X

1. 双击证书（server.crt）
2. 选择您想要的钥匙串（登录就足够了）
3. 添加证书
4. 如果尚未打开“钥匙串访问”，请将其打开
5. 选择您之前选择的钥匙扣
6. 您应该看到证书 localhost
7. 双击证书
8. 扩大信任
9. 选择使用此证书时始终信任选项
10. 关闭证书窗口

Windows 10

1. 双击证书（server.crt）
2. 单击“安装证书...”按钮
3. 选择是存储在用户级别还是机器级别
4. 点击“下一步”
5. 选择“将所有证书放入以下存储”
6. 点击“浏览”
7. 选择“受信任的根证书颁发机构”
8. 点击“确定”
9. 点击“下一步”
10. 点击“完成”
11. 如果出现提示，请单击“是”

证书现已安装。

现在将证书存储在

ssl

目录中。

现在使用命令行提供 ssl 密钥和证书，或将这些文件添加到

angular.json

（或

angular-cli.json

，具体取决于您的 Angular 版本）。

您不会看到任何“不安全”，如果您单击地址栏旁边的锁定图标，它将显示“安全”。

但是，如果您在另一个笔记本电脑上运行该应用程序，它将显示“不安全” 因为他们没有安装证书（受信任）。

Answer 2

要在 https 上运行 Angular 应用程序，请执行以下步骤。 npm 安装-g angular-http-server

Cd 站点路径和 dist 文件夹 (ClientApp/dist)

Angular-http-server -o

默认在 8080 端口运行并使用 http

使用 -p 指定端口，例如Angular-http-server -p 44367 -o

要启用 https，您必须使用 --key 和 --cert 标志手动指定自签名证书的路径

角度http服务器--https --key c:/localhost.key --cert c:/localhost.crt -p 44367 -o 或者 angular-http-server --https --key "密钥存储路径" --cert "路径"

如果本地计算机上未安装 ssl，此时您可能会看到一些错误。

如果机器上未安装 OpenSSL，请从以下链接下载

http://slproweb.com/download/Win64OpenSSL-1_1_0L.exe

生成 OpenSSL 的命令

openssl req -new -x509 -newkey rsa:2048 -sha256 -nodes -keyout localhost.key -days 3560 -out localhost.crt -configcertificate.cnf

下面的链接描述了如何创建证书，配置 CLI 来使用

https 并信任 Windows 上的证书。

https://medium.com/@richardr39/using-angular-cli-to-serve-over-https-locally-70dab07417c8

Answer 3

不需要花哨的东西，只需将标志

--https

添加到您的启动脚本即可完成。

例如：

"scripts": {
    "start": "webpack-dev-server --content-base src/ --progress --inline --hot --https"
}