本地快速启用 HTTPS

Tue, 13 Oct 2026 00:00:00 +0800

在本地浏览器里调试前端时，有时需要模拟真实的线上部署：页面使用指定域名，并通过 HTTPS 访问。直接使用 http://localhost:3000 或打开 HTML 文件，可能跑得通页面，却无法复现与域名、协议有关的行为。

比如下面这些场景：

第三方登录的回调地址已经配置成 https://xxx.com/callback。改用 localhost 后，协议、域名或端口与登记的地址不一致，登录流程会被拒绝。
登录态 Cookie 设置了 Domain=xxx.com 或 .xxx.com，还带有 Secure 属性。在 localhost 下无法按同样的域名规则使用这些 Cookie，普通 HTTP 也不满足它们的安全传输要求。
地图、支付等前端 SDK 配置了域名白名单，或服务端校验页面的 Origin。localhost 与线上域名不同，调试时可能直接触发校验失败。
Service Worker、摄像头和麦克风等浏览器能力要求安全上下文。localhost 通常有开发例外，但换成普通 HTTP 自定义域名后，就不能依赖这个例外。

这时需要的是一个能快速打开的本地地址，例如 https://xxx.com：浏览器使用目标域名和 HTTPS，页面资源文件仍由本机提供。

快速启动#

下面以 macOS 和 Homebrew 为例，托管当前目录中的静态文件。先进入前端构建产物目录（例如 dist/）或存放 HTML 的目录，再执行命令。服务使用 Python 3.14 及以上版本。

xxx.com 是示例域名，实际使用时，把 hosts 记录、证书命令和访问地址中的域名一起替换。首次使用先完成准备；如果 /etc/hosts 已有这个域名的记录，应将它改为指向 127.0.0.1，避免重复配置。

# 首次准备：安装依赖、信任本地 CA，并将域名解析到本机
brew install mkcert python
mkcert -install
printf '\n127.0.0.1 xxx.com\n' | sudo tee -a /etc/hosts

然后执行这一组命令：