默认情况下如何使用https运行Angular，如何使用https运行Angular? [英] How to run Angular with https when by default it runs with http?

问题描述

默认情况下，如果我们运行Angular应用程序，它们将以 http (例如，在 http://localhost:4200 上)运行.

By default if we run Angular applications they run with http (e.g. on http://localhost:4200).

如何将其从 http 转换为使用 https ?

How to convert it from http to use https?

推荐答案

简单的修补程序已代替运行:

Simple fix is instead of running:

ng s -o

使用额外的属性运行它:

Run it with an extra attribute:

ng s -o ---ssl true

它将在 https://localhost:4200 上运行.但是，如果您有一个 .crt 和一个 .key 文件，则还要添加该属性.

It will run on https://localhost:4200. But, if you have a .crt and a .key file, then add that attribute also.

您将看到一个以https开头的浏览器，尽管它会说不安全".作为警告.

You will see a browser which will start with https, although it will say "not secure" as a warning.

如果您只想在https上运行并且不关心不安全"邮件，则此操作就足够了.信息.如果您确实需要，请按照进一步的说明进行操作.

This is sufficient if you just wanna run on https and you don't care about the "not secure" message. If you do care, proceed with further instructions.

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

或提供 .key 和 .crt 文件的相对路径.

or give relative path to .key and .crt file.

如果您不想每次都提供这些属性，或者不想运行例如完整的 NGINX 服务器来获取angular，请在 angular.json 中添加这些属性，或者 angular-cli.json (取决于角度版本):

If you don't want to provide these attributes each time, or running for example a full NGINX server for angular, then add these attributes in angular.json or angular-cli.json depending upon angular version:

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

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

sslkey 和 sslcert .

sslkey and sslcert are not required if you don't have .key and .crt file.

在这里，我假定两个文件都在 ssl 目录中，其中src.现在，仅运行 ng s -o 就足以通过 angular.json 文件使用证书.

Here, I assumed to have both files in a ssl dir where src. Now, runningonly ng s -o is sufficient to use the certificate via the angular.json file.

如何仅为您的计算机或仅一个用户为localhost创建临时修补程序.

How to create temporary fix for localhost for only your machine or only for one users.

要求:

1. Git bash(在此处下载字体)

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

Now go to Git bash and type this command one at a time

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

The cloned application use openssl(software library for applications that secure communications over computer networks against eavesdropping or need to identify the party at the other end) to generate .crt and .key file

它将创建 server.key 和 server.crt 文件.

现在单击server.crt

Now click on 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. 如果出现提示，请单击是"

现在已安装证书.

The certificate is now installed.

现在将证书存储在 ssl 目录中.

Now store the certificate in a ssl directory.

现在使用命令行提供ssl密钥和证书，或将这些文件添加到 angular.json (或 angular-cli.json ，具体取决于您的Angular版本)).

Now use the command line to provde ssl key and certificate, or add these files to angular.json (or angular-cli.json, depending on your Angular version).

您将看不到任何不安全"的字样，并且会在屏幕上显示安全"字样.如果您点击地址栏旁边的锁定图标.

You will not see any "not secure", and it will show "secure" if you click on lock icon adjacent to address bar.

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

But, if you will run the application in other's laptop it will show "not secure" as they have not installed the certificate (trusted).

这篇关于默认情况下如何使用https运行Angular，如何使用https运行Angular?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！