对于使用NX的带有Angular Micro前端的mac

步骤1：创建自签名根证书

openssl req -x509 -nodes -new -sha256 -days 390 -newkey rsa:2048 -keyout "RootCA.key" -out "RootCA.pem" -subj "/C=de/CN=localhost.local"
openssl x509 -outform pem -in "RootCA.pem" -out "RootCA.crt"

步骤2：定义应包含在证书中的域和子域

为此，只需创建一个名为vhosts_domains.ext的文本文件并插入以下内容：

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names
[alt_names]
DNS.1 = localhost
DNS.2 = *.mixable.blog.local
DNS.3 = mixable.blog.local

此示例包括域mixeble.blog.local的本地开发环境的子域以及所有子域，如www.mixable.blog.loal或apps.mixeble.blog.local。

步骤3：创建证书

openssl req -new -nodes -newkey rsa:2048 -keyout localhost.key -out localhost.csr -subj "/C=de/ST=State/L=City/O=Organization/CN=localhost.local"
openssl x509 -req -sha256 -days 1024 -in localhost.csr -CA RootCA.pem -CAkey RootCA.key -CAcreateserial -extfile vhosts_domains.ext -out localhost.crt

步骤4：使证书可用于Angular应用程序

nx serve host --open --devRemotes=<app names> --ssl --ssl-key <folder_location>/localhost.key --ssl-cert <folder_location>/localhost.crt

步骤5：将证书从导入添加到macOS密钥链

在chrome上，如果您仍然获得无效证书，则下载证书并添加到密钥链，并使所有证书都可信。

仅适用于本地主机

只需将其粘贴到您的铬中：

chrome://flags/#allow-insecure-localhost

您应该看到突出显示的文本：

允许从本地主机加载的资源的证书无效

单击启用。

其他站点

尝试在窗口的任何位置键入thisisnsafe，浏览器将允许您访问该页面。

-OR-

对于本地自签名证书，可以避免晦涩难懂的命令、专门知识和手动步骤，请尝试从这个答案中选择mkcert。

修复Windows上的Chrome。

首先，您需要导出证书。

在浏览器中找到url。url的“https”段将为用红线划掉，左侧将有一个锁定符号。右键单击划掉的“https”段。您将看到一个包含各种信息的信息窗口单击“详细信息”。导出证书，按照说明接受默认设置。

要导入

转到Chrome设置单击“高级设置”在HTTPS/SSL下单击“管理证书”转到“受信任的根证书颁发机构”单击“导入”将出现一个弹出窗口，询问您是否要安装此证书。单击“是”。

对于MacOS上的Chrome，如果您准备了证书：

退出Chrome（cmd+Q）。启动Keychain Access应用程序并打开“证书”类别。将证书文件拖到Keychain Access窗口上，然后键入证书文件的密码。双击证书并展开“信任”列表。在“使用此证书时”行中，选择“始终信任”关闭此内容并键入密码。启动Chrome并清除所有缓存。检查一切是否正常。

更新日期：2020年4月23日

铬团队推荐

https://www.chromium.org/Home/chromium-security/deprecating-powerful-features-on-insecure-origins#TOC-测试强大功能

快速超级简单解决方案

有一个秘密的绕过短语，可以在错误页面中输入，让Chrome不顾安全错误继续运行：这是不安全的（在早期版本的Chrome中，键入baddidea，甚至更早版本的危险）。除非你完全明白为什么需要它，否则不要使用它！

资料来源：

https://chromium.googlesource.com/chromium/src/+/d8fc089b62cd4f8d907acff6fb3f5ff58f168697%5E%21/

（注意，window.atob（'dGhpc2lzdW5zYWZl'）解析为此isnsafe）

源的最新版本为@https://chromium.googlesource.com/chromium/src/+/refs/heads/master/components/security_interentials/corebrowser/resources/intertial_large.js和window.atob函数可以在js控制台中执行。

有关Chrome团队为何更改旁路短语（第一次）的背景信息：

https://bugs.chromium.org/p/chromium/issues/detail?id=581189

如果所有其他方法都失败（解决方案1）

对于快速一次性，如果“无论如何继续”选项不可用，或者旁路短语也不起作用，这个黑客很好：

通过启用此标志，允许来自本地主机的证书错误（注意，更改标志值后，Chrome需要重新启动）：chrome://flags/#allow-不安全的本地主机（并投票赞成答案https://stackoverflow.com/a/31900210/430128作者@Chris）如果要连接的站点是localhost，那么就完成了。否则，设置TCP隧道以在本地侦听端口8090，并连接到端口443上的broken-remote-site.com，确保已安装socat并在终端窗口中运行以下内容：socat tcp侦听：8090，reuseddr，fork tcp：断开远程站点.com:443去https://localhost:8090在浏览器中。

如果所有其他方法都失败（解决方案#2）

类似于“如果所有其他都失败（解决方案#1）”，这里我们使用ngok为本地服务配置代理。因为您可以通过TLS访问ngrok http隧道（在这种情况下，它由ngrok使用有效证书终止），也可以通过非TLS端点访问，所以浏览器不会抱怨证书无效。

下载并安装ngrok，然后通过ngrok.io公开它：

ngrok http https://localhost

ngok将启动并为您提供一个可以连接到的主机名，所有请求都将通过隧道传输回本地计算机。

我也遇到了同样的问题：我已将证书安装到Windows的Trusted Root Authorities存储中，但Chrome仍然拒绝证书，错误为ERR_CERT_COMMON_NAME_INVALID。请注意，当证书未正确安装在存储中时，错误为ERR_CERT_AUTHORITY_INVALID。

正如错误名称、此注释和此问题所暗示的，问题在于证书中声明的域名。当生成证书时提示输入“CommonName”时，我必须输入用于访问站点的域名（在我的情况下是localhost）。我使用重新启动了Chromechrome://restart它终于对这个新证书感到满意。