对于使用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上，如果您仍然获得无效证书，则下载证书并添加到密钥链，并使所有证书都可信。

在这里，我的WINDOWS解决方案可能适用于LINUX

Git有openssl

C： \Program Files\Git\usr\bin\openssl.exe。

导航到C:\Program Files\Git\user\bin\，但最好添加到PATH

为证书创建文件夹创建文件req.cnf像我的公司一样改变价值观不要删除subjectAltName=@alt_names[备选名称]DNS.1=本地主机Chrome抱怨

C=CA CA是两个字母国家代码CA=加拿大、美国。。。ST=ON是安大略省

请求cnf

[req]
distinguished_name = req_distinguished_name
x509_extensions = v3_req
prompt = no
[req_distinguished_name]
C = CA
ST = ON
L = Toronto
O = MyCompany
OU = MyDivision
CN = localhost
[v3_req]
keyUsage = critical, digitalSignature, keyAgreement
extendedKeyUsage = serverAuth
subjectAltName = @alt_names
[alt_names]
DNS.1 = localhost 
DNS.2 = www.mydomainname.com
DNS.3 = mydomainname.com

在CMD中创建证书

 openssl req -x509 -nodes -days 365 -newkey rsa:2048  -keyout server.key -out server.crt -config req.cnf -sha256

 cat server.crt server.key > server.pem

覆盖dev证书

 yourproject\node_modules\webpack-dev-server\ssl   with the **server.pem**

在chrome设置->管理证书

将server.crt导入到受信任的认证授权重新启动chrome

在package.json中

 "scripts": {
    "start": "set HTTPS=true&&react-scripts start",

我尝试了一切，并尝试了什么：导入时，选择正确的类别，即受信任的根证书颁发机构：

（很抱歉，这是德语，但请按照图片操作）

更新11/2017：这个答案可能不适用于大多数较新版本的Chrome。更新02/2016:Mac用户的更好说明可以在这里找到。

在要添加的站点上，右键单击地址栏中的红色锁定图标：单击标记为“连接”的选项卡，然后单击“证书信息”单击“详细信息”选项卡，然后单击“复制到文件…”按钮。。。。这将打开证书导出向导，单击下一步进入导出文件格式屏幕。选择DER编码二进制X.509（.CER），单击“下一步”单击浏览。。。并将文件保存到计算机。给它起个描述性的名字。单击下一步，然后单击完成。打开Chrome设置，滚动到底部，然后单击显示高级设置。。。在HTTPS/SSL下，单击管理证书。。。单击受信任的根证书颁发机构选项卡，然后单击导入。。。按钮这将打开证书导入向导。单击“下一步”进入“要导入的文件”屏幕。单击浏览。。。并选择先前保存的证书文件，然后单击“下一步”。选择将所有证书放置在以下存储中。所选存储应为受信任的根证书颁发机构。如果不是，请单击浏览。。。然后选择它。单击“下一步”并完成单击安全警告上的“是”。重新启动Chrome。

您确定站点的地址与证书相同吗？我对Chrome和自签名证书也有同样的问题，但最后我发现它对证书上域名的验证非常挑剔（应该如此）。

Chrome没有自己的证书存储，而是使用Windows自己的证书。然而，Chrome不提供将证书导入商店的方法，因此您应该通过IE添加证书。

在Google Chrome中安装证书

在Internet Explorer中安装证书

还可以看看这两种不同的创建自签名证书的方法（我假设您使用的是您没有提到的IIS）。

如何在IIS 7中创建自签名证书

对于使用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上，如果您仍然获得无效证书，则下载证书并添加到密钥链，并使所有证书都可信。