mkcert实现本地https

​​1.下载 mkcert​​

从 mkcert GitHub 发布页 下载适用于 Windows 的版本(如 mkcert-v1.4.4-windows-amd64.exe)。

​​安装 mkcert​​

以管理员身份运行命令提示符(CMD),执行以下命令安装并信任本地 CA:

bash 复制代码
mkcert-v1.4.4-windows-amd64.exe -install

这会自动将 mkcert 的根证书添加到系统受信任的 CA 列表中。

​​2. 生成 SSL 证书​​

为你的本地 IP 生成证书:

bash 复制代码
mkcert-v1.4.4-windows-amd64.exe 192.168.31.42 localhost 127.0.0.1 ::1

生成的文件:

bash 复制代码
192.168.31.42+1.pem(证书)
192.168.31.42+1-key.pem(私钥)。

​​3. 配置开发服务器​​

​​Vite 项目(Vue/React)​​

在 vite.config.js 中配置 HTTPS:

bash 复制代码
import { defineConfig } from 'vite'
import fs from 'fs'

export default defineConfig({
  server: {
    https: {
      key: fs.readFileSync('192.168.31.42+1-key.pem'),
      cert: fs.readFileSync('192.168.31.42+1.pem'),
    },
    host: '0.0.0.0', // 允许局域网访问
    port: 5174,
  },
})

重启项目后访问 https://192.168.31.42:5174

​​其他服务器(如 Nginx)​​

修改 Nginx 配置:

bash 复制代码
server {
    listen 443 ssl;
    server_name 192.168.31.42;
    ssl_certificate /path/to/192.168.31.42+1.pem;
    ssl_certificate_key /path/to/192.168.31.42+1-key.pem;
    location / {
        proxy_pass http://localhost:5174;
    }
}

重启 Nginx:

bash 复制代码
nginx -s reload
相关推荐
碳基修炼34 分钟前
排查记:本地 devServer 是 http,浏览器却把 302 重定向升级成了 https
前端·http
szephyr2 小时前
HTTPS 证书申请与自动续期:acme.sh + Let‘s Encrypt 完整记录
nginx·https·acme.sh·证书续期
那年窗外下的雪.8 小时前
第 02 天:Linux 权限、inode、目录项与链接
学习·http
那年窗外下的雪.9 小时前
AIDC 学习日志|第 27 天|EVPN 多归属收敛时间线与 Leaf2 接管验证
网络协议·学习·http·tcpdump
j7~10 小时前
【Linux】三十八.C++ 手写 HTTP 服务器:裸 socket + fork 多进程,从 HTTP 报文解析到浏览器打开网页
linux·网络·网络协议·学习·http·网络编程
Lsetea10 小时前
部署证书后提示“证书名称与输入不匹配”:Safari 报错的三层排查
nginx·https·safari·ssl证书·openssl
小则又沐风a11 小时前
深入理解TCP协议----滑动窗口,流量控制
linux·网络协议·tcp
captain37621 小时前
网络原理(9)-数据链路层
java·网络协议·java-ee
yi碗汤园1 天前
MQTT消息队列遥测传输协议
网络·网络协议·unity
花间相见1 天前
【后端开发|网络编程】—— 五种实时通信方案全解析:短轮询、长轮询、SSE、MQTT、WebSocket
后端·网络协议