前言
在大多数情况下,http://localhost 就可以满足大部分开发需求:在浏览器中,它的行为与 HTTPS 🔒 非常类似。因此,部分无法在部署的 HTTP 网站上运行的 API 可以在 http://localhost 上运行。 这意味着只需要在特殊情况下才需要在本地使用 HTTPS(请参阅何时使用 HTTPS 进行本地开发),例如自定义主机名或跨浏览器的安全 cookie或者使用一些特殊需要https才能启用的API权限时就必须使用https在本地开发了
使用 mkcert 为本地网站开启 HTTPS
要为本地开发网站开启 HTTPS 并访问 https://localhost 或 https://mysite.example(自定义主机名),您需要 TLS 证书。但并非任何证书都会被浏览器接受:证书需要由您的浏览器信任的实体签名,这些实体称之为可信证书颁发机构 (CA) 。
您需要创建一个证书,并使用受您的设备和浏览器本地信任的 CA对其进行签名。 您可以使用工具 mkcert 通过几个命令来实现这个目的。下面介绍了它的工作原理:
- 如果您使用 HTTPS 在浏览器中打开本地运行的网站,浏览器将检查本地开发服务器的证书。
- 在看到证书已由 mkcert 生成的证书颁发机构签名后,浏览器会检查它是否已注册为受信任的证书颁发机构。
- mkcert 已被列为受信任的颁发机构,所以浏览器会信任该证书并创建 HTTPS 连接。
mkcert 工作原理图
上述描述摘抄自 https://web.dev/how-to-use-local-https/,本次开发主要也是基于此文章,使用的工具是:mkcert
mkcert(和类似工具)具备下列几种优势:
- mkcert 专门用于创建与浏览器认为有效相兼容的证书。它会保持更新,来满足需求和最佳实践。因此您无需运行具备复杂配置或参数的 mkcert 命令,就可以生成正确的证书!
- mkcert 是跨平台的工具。团队中的任何人都可以使用。
安装 mkcert
安装(仅一次)
brew install mkcertbrew install nss # if you use Firefox
将 mkcert 添加到本地根 CA。
mkcert -install
为网站生成一个由 mkcert 签名的证书。
mkcert localhost
其中在自用的脚手架 lark-cli
中集成了 mkcert 命令,当执行 lark start
时,可直接在本地生成https证书方便开发前端项目,具体请看项目:https://github.com/lark-org/lark-cli
也可在nodejs
中使用,例如:
const https = require('https');const fs = require('fs');const options = { key: fs.readFileSync('{PATH/TO/CERTIFICATE-KEY-FILENAME}.pem'), cert: fs.readFileSync('{PATH/TO/CERTIFICATE-FILENAME}.pem'),};https .createServer(options, function (req, res) { // server code }) .listen({PORT});
总结
文章/how-to-use-local-https/中除了mkcert
之外也介绍了其他方式,像反向代理或者申请证书机构的证书等,之前的话也主要是使用代理的形式在本地启用https,现在有了mkcert
,可以更快更便捷的在本地生成https证书方便开发,自己也集成到了前端自用脚手架内,测试比较顺滑,如果有兴趣可以到项目内体验下:https://github.com/lark-org/lark-cli