不在 localhost 中工作时出现无效的证书颁发机构错误

Question

我正在尝试在开发网站上实施 HTTPS 以进行演示。我的前端是一个 VueJS 应用程序，我的后端是一个使用 Python.

的 Flask 应用程序

为了在我的网站上实施 HTTPS，我执行了以下操作：

生成的自签名证书：

私钥是一个名为 'private.key' 的 RSA 2048 加密密钥。

使用 certificate.txt 生成一个 csr 证书。

openssl req -new -config certificate.txt -key private.key -out certificate.csr

使用certificate.csr

生成最终证书

openssl x509 -signkey private.key -in certificate.csr -req -days 365 -out certificate.crt

与certificate.txt如下：

[ req ]
prompt = no
distinguished_name = dn
req_extensions = req_ext

[ dn ]
CN = test.domain.en
emailAddress = ssl@exemple.com
O = Company
OU = test
L = UK
ST = UK
C = UK

[ req_ext ]
subjectAltName = DNS: localhost, DNS: test.domain.en, IP: X.X.X.X:XXXX'ip of my vm'

前端（VueJS配置）：

在vue.config.js中添加link到证书和私钥

const fs = require('fs');

module.exports = {
  devServer: {
    https: {
        key: fs.readFileSync('src/assets/certificate/private.key'),
        cert: fs.readFileSync('src/assets/certificate/certificate.crt'),
    },
    public: 'https://protected.deloitte.lu:8080/',
    disableHostCheck: true,
  },
};

在发出 POST 请求时在 axios 的 httpsAgent 中添加 rejectUnauthorized 参数

const httpsAgent = new https.Agent({  
    rejectUnauthorized: false
});

axios.post(payload, formData, {headers: headers, httpsAgent: httpsAgent})

后端（Python中的Flask配置）

当应用处于运行

时在 ssl 上下文中添加证书和密钥

if __name__ == '__main__':
    context=('./certs/certificate_cloud.crt','./certs/private.key')
    app.run(host='0.0.0.0', port=5008, debug=False, ssl_context=context)

Web 浏览器（Chrome 配置）

已启用：chrome://flags/#allow-insecure-localhost

已安装 certificate.crt 'Trusted Root Certification Authorities'

结果：

前端：https://localhost:8080/

后端：https://X.X.X.X:5008/

当后端托管且运行在本地主机上时，post 请求运行良好，协议为请求的 HTTPS。

但是，当我在 AWS 虚拟机上迁移 flask 应用程序时，出现此错误：

POST https://XXX.XXX.XXX.XXX:XXXX/path/to/function/ net::ERR_CERT_AUTHORITY_INVALID

我已经尝试过的：

将ssl_context=context替换为ssl_context='adhoc'

生成多个不同域名的证书，并用该域名配置ip

附加问题：

是否可以使用 openssl 生成的自签名证书删除 Chrome 上的 'Not secure' 图标？

Answer 1

我刚刚注意到我从来没有发布过这个问题的解决方案。您可以在下面找到创建本地笔记本电脑浏览器 (Google Chrome) 可识别的自签名证书的所有步骤。希望对某些人有所帮助：

打开命令提示符
通过在此处为 Windows 下载 Git，在笔记本电脑上安装 OpenSSL 命令行：https://gitforwindows.org/

安装后，在Windows搜索栏中搜索“Git bash”并打开

如果安装好，输入openssl version，在打开的命令提示符中应该看到：OpenSSL <your.current.version> <date_of_today>

使用此命令行创建一个 private.key：openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout private.key -out certificate.crt（为每个参数键入 Enter，保留“private.key”并删除“certificate.crt")

使用以下文本创建一个“certificate.txt”文件：

[ req ] prompt = no distinguished_name = dn x509_extensions = req_ext [ dn ] CN = <DOMAIN-NAME-OF-YOUR-WEBSITE> emailAddress = ssl@exemple.com O = <YOUR-COMPANY-NAME> OU = <YOUR-COMPANY-DEPARTMENT-NAME> L = <YOUR-COUNTRY> ST = <YOUR-COUNTRY> C = <YOUR-COUNTRY-CODE> [ req_ext ] subjectAltName = @alt_names [ alt_names ] DNS.1 = localhost DNS.2 = <DOMAIN-NAME-OF-YOUR-WEBSITE> DNS.3 = <ANOTHER-DOMAIN-NAME-OF-YOUR-WEBSITE>

使用命令行创建证书“certificate_final.crt”：openssl req -new -x509 -key private.key -days 365 -out certificate_final.crt -config certificate.txt（证书有效期为365天）

打开这个“certificate_final.crt”文件

点击“安装证书”

Select“当前用户”

Select“将所有证书放入以下存储”和“浏览”

Select“受信任的根证书颁发机构”

点击“完成”

打开“Google Chrome”

在顶部搜索栏中，输入 chrome://flags/#allow-insecure-localhost。它将使 Chrome 能够识别您的自签名证书。 在演示结束时取消选择此选项以使用真实有效证书浏览网页

将路径调整为“vue.config.js”文件中的“private.key”和“certificate_final.crt”

运行 npm run serve。如果一切顺利，您应该在终端中看到“网络：https://DOMAIN-NAME-OF-YOUR-WEBSITE:8080/”，这意味着您正在使用 HTTPS 中的自定义域名。

不在 localhost 中工作时出现无效的证书颁发机构错误

Invalid certificate authority error when not working in localhost

openssl

flask

vue.js

axios

self-signed-certificate

生成的自签名证书：

前端（VueJS配置）：

后端（Python中的Flask配置）

结果：

我已经尝试过的：

附加问题：