默认情况下,如果我们运行Angular应用程序,它们将使用http
运行(例如在http://localhost:4200
上)。
如何将其从http
转换为使用https
?
简单的修复不是运行:
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>
或者给出CCD_ 8和CCD_。
如果您不想每次都提供这些属性,或者不想为angular运行完整的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",
}
}
如果没有.key
和.crt
文件,则不需要sslkey
和sslcert
。
在这里,我假设这两个文件都位于ssl
目录中,其中src。现在,仅运行ng s -o
就足以通过angular.json
文件使用证书。
如何仅为您的机器或仅为一个用户创建本地主机的临时修复程序。
要求:
- Gitbash(在此处下载fom)
现在转到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文件
它将创建server.key
和server.crt
文件。
现在点击server.crt
对于OS X
- 双击证书(server.crt)
- 选择您想要的钥匙扣(登录即可)
- 添加证书
- 如果钥匙链访问尚未打开,请打开它
- 选择先前选择的钥匙链
- 您应该看到证书localhost
- 双击证书
- 扩大信任
- 选择"使用此证书时始终信任"选项
- 关闭证书窗口
Windows 10
- 双击证书(server.crt)
- 单击按钮"安装证书…">
- 选择要将其存储在用户级别还是机器级别
- 单击"下一步">
- 选择"将所有证书放入以下存储">
- 单击"浏览">
- 选择"受信任的根证书颁发机构">
- 单击"确定">
- 单击"下一步">
- 单击"完成">
- 如果收到提示,请单击"是">
现在已安装证书。
现在将证书存储在ssl
目录中。
现在使用命令行来证明ssl密钥和证书,或者将这些文件添加到angular.json
(或angular-cli.json
,具体取决于您的Angular版本)。
你不会看到任何";不安全";,并且它将显示";"安全";如果你点击地址栏旁边的锁定图标。
但是,如果你要在别人的笔记本电脑上运行该应用程序,它会显示";不安全";因为他们还没有安装证书(受信任)。
要在https上运行angular应用程序,请执行以下步骤。npm安装-g angular http服务器
Cd站点路径&在dist文件夹(ClientApp/dist)中
Angular http服务器-o
默认情况下在8080端口运行,并使用http
使用-p指定端口,例如Angular http服务器-p 44367-o
要启用https,您必须使用--key和--cert标志手动指定自签名证书的路径
angular http服务器--https--密钥c:\localhost.key--证书c:\localhost.crt-p 44367-o或angular http服务器--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/使用angular-cli服务ver-https-locally-70dab007417c8
不需要花哨的东西,只需将标志--https
添加到启动脚本中即可。
例如:
"scripts": {
"start": "webpack-dev-server --content-base src/ --progress --inline --hot --https"
}