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

问题描述

1. 如果我们运行角度应用程序，则默认情况下
2. 它在http( http://localhost:4200 上运行.
3. 如何将其从http转换为https?

1. By Default if we run angular app
2. It runs on http(http://localhost:4200).
3. How to convert it from http to https?

推荐答案

简单修复程序正在运行

ng s -o

使用额外的属性运行

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

ng s -o ---ssl true //It will run on https://localhost:4200. But, if you have .crt and .key file, then add that attribute also

您将在浏览器中看到它以https开头，但仍然显示不安全"

You will see in browser it will start with https still it says "not secure"

如果您只想在https上运行并且不关心不安全"，那就足够了，否则继续>>

This is sufficient if you just wanna run on https and you don't care "not secure", else proceed >>

ng s -o ---ssl true --ssl-key <path to key file> --ssl-cert <path to crt file> 或提供.key和.crt文件的相对路径

ng s -o ---ssl true --ssl-key <path to key file> --ssl-cert <path to crt file> or give relative path to .key and .crt file

如果您不想每次都提供此属性，或者不想运行 nginx 服务器来获取角度，则可以将这些属性添加到 angular.json 或 angular- cli.json (取决于角度版本)

If you don't want to give this attribute each time or running 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文件，则不需要

ssslkey和sslcert

ssslkey and sslcert is not required if you don't have .key and .crt file

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

Here, I kept both file in ssl dir where src, e2e and angular.json is there

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

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

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

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

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

Now go to Gitbash 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 文件

It will create server.key & server.crt file

现在单击server.crt

Now click on server.crt

• 对于OS X

1.双击证书(server.crt)

1.Double click on the certificate (server.crt)

2.选择所需的钥匙串(登录即可)

2.Select your desired keychain (login should suffice)

3.添加证书

4.如果尚未打开钥匙串访问，则将其打开

4.Open Keychain Access if it isn’t already open

5.选择您之前选择的钥匙串

5.Select the keychain you chose earlier

6.您应该看到证书localhost

6.You should see the certificate localhost

7.双击证书

8.扩大信任度

9.选择选项在使用此证书时始终信任"

9.Select the option Always Trust in When using this certificate

10.关闭证书窗口

• Windows 10

1.双击证书(server.crt)

1.Double click on the certificate (server.crt)

2.单击安装证书..."按钮

2.Click on the button "Install Certificate …"

3.选择要在用户级别还是在计算机级别存储

3.Select whether you want to store it on user level or on machine level

4.单击下一步"

5.选择将所有证书放置在以下存储中"

5.Select "Place all certificates in the following store"

6.单击浏览"

7.选择受信任的根证书颁发机构"

7.Select "Trusted Root Certification Authorities"

8.单击确定"

9.单击下一步"

10.单击完成"

11.如果出现提示，请单击是"

11.If you get a prompt, click "Yes"

现在已安装证书.

The certificate is now installed.

现在将证书存储在ssl目录中(那里有src，e2e目录)(首选方式)

Now store the certificate in ssl directory(Where src, e2e dir are there)(preferred way)

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

Now use the inline command to add ssl key and certificate or add to angular.json/angular-cli.json

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

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，默认情况下使用http运行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！