【前端基建】使用 openssl 自建签名证书颁发给域名或IP地址，使用https访问行项目，让浏览器信任

在前端项目开发。调用camera，media 等一些api时浏览器需要用户使用https访问项目于才可以调用相关的api，今天我们就自己生成证书，并让浏览器信任，不用每次手动点击信任。

使用 openssl 创建自签名证书，并让浏览器信任它，以域名test.cn可以按照以下步骤操作：

---

步骤 1：生成根 CA（证书颁发机构）

首先，我们需要创建一个根 CA，并使用它来签发服务器证书。

1.1 生成根 CA 私钥

openssl genrsa -out rootCA.key 2048

1.2 生成根 CA 证书

openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 3650 -out rootCA.crt

填写信息时：

• Common Name (CN): 输入 Test Root CA 作为 CA 名称
• 其他信息可以随意填写。

---

步骤 2：生成服务器证书

2.1 生成服务器私钥

openssl genrsa -out server.key 2048

2.2 生成证书签名请求 (CSR)

openssl req -new -key server.key -out server.csr

填写信息时：

• Common Name (CN): 必须填 test.cn // 必须与签名的域名或IP一致
• 其他信息可随意填写。

2.3 创建配置文件 test.cn.ext

新建 test.cn.ext 文件，内容如下：

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, keyEncipherment
extendedKeyUsage = serverAuth
subjectAltName = @alt_names

[alt_names]
DNS.1 = test.cn
DNS.2 = www.test.cn

或

IP = 192.168.1.100   // 为IP地址签发证书

2.4 使用 CA 证书签发服务器证书

openssl x509 -req -in server.csr -CA rootCA.crt -CAkey rootCA.key -CAcreateserial \
-out server.crt -days 3650 -sha256 -extfile test.cn.ext

---

步骤 3：在 Windows 中安装证书

3.1 安装 CA 证书

1. 双击 rootCA.crt，点击 安装证书。
2. 选择 本地计算机（或当前用户）。
3. 选择 受信任的根证书颁发机构 作为存储位置。
4. 点击 下一步 -> 完成。
   

3.2 安装服务器证书

• 将 server.crt 和 server.key 安装到服务器（如 Nginx、Nodejs）。
• 配置 Web 服务器使用此证书。

const https = require('https')
const fs = require('fs')

const options = {
    key: fs.readFileSync('./server.key'),
    cert: fs.readFileSync('./server.crt')
}
 https.createServer( options ,(req, res) => {
    console.log(req.url);
    res.writeHead(200)
    res.end('hello world\n')
}).listen(4430, () => {
    console.log('server start at 4430')
})

---

步骤 4：本机解析域名地址，如果为ip地址颁发签名，则可跳过该步骤

1. 修改本地hosts文件
2. 将域名地址修改为服务器ip
   
   

如果因为权限无法修改时，可将文件复制到桌面进行修改，修改完以后复制回原位置进行覆盖

步骤 5：配置浏览器信任

1. 重新启动 Windows。
2. 访问 https://test.cn:84430，浏览器应当不会再显示安全警告。
   如果仍然有问题：

• 打开浏览器 F12 选择 安全 查看警告原因。
• 清除浏览器缓存，尝试 重启 浏览器。

这样，你就可以在 Windows 上通过 HTTPS 访问 test.cn 而不会出现证书警告了！ 🚀