Question

如果我们运行角度应用程序，则默认情况下
它在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.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",
      }
}

如果没有.key和.crt文件，则不需要

ssslkey和sslcert

在这里，我将两个文件都保存在src目录中，其中有src，e2e和angular.json。

那么只有ng s -o就足够了

如何仅针对您的计算机或仅针对一个用户为本地主机创建临时修补程序

需要

Git bas（Download fom here）

现在转到Gitbash并一次键入一个命令

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 < / strong>文件

它将创建 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目录中（那里有src，e2e目录）（首选方式）

现在使用inline命令添加ssl密钥和证书，或添加到angular.json / angular-cli.json

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

但是，如果您要在其他人的笔记本电脑上运行该应用程序，它将显示“不安全” 因为他们尚未安装证书（受信任）

Answer 2

不需要花哨的东西，只需将标志--https添加到您的启动脚本中并完成操作即可。

例如：

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

Answer 3

要在https上运行angular应用程序，请执行以下步骤。 npm install -g Angular-http服务器

Cd站点和dist文件夹中的路径（ClientApp / dist）

Angular-http-server -o

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

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

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

angular-http-server --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 -config certificate.cnf

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

https并在Windows上信任证书。

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

如何使用https默认运行http的角度运行？

3 个答案:

需要