大多数情况下,http://localhost
在开发中的行为类似于 HTTPS
目的。不过,也有一些特殊情况,
例如自定义主机名或跨浏览器使用安全 Cookie,而您需要
明确地将开发网站设置为像 HTTPS 一样运行,
代表您的网站在生产环境中的运行情况。(如果您的生产网站
请使用 HTTPS,请优先改用 HTTPS)。
本页面介绍了如何使用 HTTPS 在本地运行您的网站。
如需查看简要说明,请参阅 mkcert 快速参考。**
使用 mkcert 在本地通过 HTTPS 运行网站(推荐)
在本地开发网站中使用 HTTPS 并访问 https://localhost
或
https://mysite.example
(自定义主机名),您需要
TLS 证书
由您的设备和浏览器信任的实体(称为“可信”)进行签名
证书授权机构 (CA)。
浏览器会检查开发服务器的证书是否由
受信任的 CA。
我们建议使用 mkcert, 跨平台 CA 来创建和签署证书。对于其他有用的 选项,请参阅使用 HTTPS 在本地运行您的网站:其他选项。
许多操作系统都包含用于创建证书的库,如 openssl.不过,它们更复杂, 比 mkcert 更可靠,也不一定跨平台,因此它们 大型开发团队的访问难度也会降低。
设置
安装 mkcert(仅一次)。
按照相关说明操作 在操作系统上安装 mkcert。例如,在 macOS 上:
brew install mkcert brew install nss # if you use Firefox
将 mkcert 添加到本地根 CA。
在终端中,运行以下命令:
mkcert -install
这将生成一个本地证书授权机构 (CA)。 由 mkcert 生成的本地 CA 仅在设备上的本地可信位置。
为您的网站生成一个由 mkcert 签名的证书。
在您的终端中,导航到您网站的根目录或任何 您想要保存证书的目录。
然后运行以下命令:
mkcert localhost
如果您使用的是
mysite.example
等自定义主机名,请运行以下命令:mkcert mysite.example
此命令会执行两项操作:
- 为您指定的主机名生成证书。
- 让 mkcert 为证书签名。
您的证书现已准备就绪,并由 信任。
将您的服务器配置为使用 HTTPS 您刚刚创建的 TLS 证书。
具体的操作方法取决于您的服务器。以下是一些示例:
🗓?🥰? 🏏? 有节点:
server.js
(替换{PATH/TO/CERTIFICATE...}
和{PORT}
):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});
✅🥰? 🚀? 使用 http-server:
按如下方式启动服务器(替换
{PATH/TO/CERTIFICATE...}
):http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem
-S
使用 HTTPS 运行服务器,而-C
用于设置证书,-K
用于设置密钥。💻?快速 💻? 使用 React 开发服务器:
按如下方式修改您的
package.json
,并替换{PATH/TO/CERTIFICATE...}
:"scripts": { "start": "HTTPS=true SSL_CRT_FILE={PATH/TO/CERTIFICATE-FILENAME}.pem SSL_KEY_FILE={PATH/TO/CERTIFICATE-KEY-FILENAME}.pem react-scripts start"
例如,如果您在网站的
localhost
中创建了证书, 根目录:|-- my-react-app |-- package.json |-- localhost.pem |-- localhost-key.pem |--...
那么您的
start
脚本应如下所示:"scripts": { "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"
🥰? 💻? 其他示例:
在浏览器中打开
https://localhost
或https://mysite.example
以执行以下操作: 请仔细检查您是否使用 HTTPS 在本地运行网站你不会看到 浏览器警告,因为您的浏览器将 mkcert 视为本地证书 授权。
mkcert 快速参考
如需使用 HTTPS 运行您的本地开发网站,请执行以下操作:
-
设置 mkcert。
如果您尚未安装 mkcert,例如在 macOS 上安装:
brew install mkcert
勾选 install mkcert 了解适用于 Windows 和 Linux 的说明。
然后,创建本地证书授权机构:
mkcert -install
-
创建受信任的证书。
mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}
这将创建一个 mkcert 自动签署的有效证书。
-
将开发服务器配置为使用 HTTPS 和您所需的证书 在第 2 步中创建的应用 ID。
您现在可以在浏览器中访问 https://{YOUR HOSTNAME}
了,且不会出现警告
</div>
使用 HTTPS 在本地运行您的网站:其他选项
以下是设置证书的其他方法。这些通常是 比使用 mkcert 更复杂或更危险。
自签名证书
您也可以决定不使用 mkcert 等本地证书授权机构, 自行签署证书。这种方法存在一些缺陷:
- 浏览器不信任您是证书授权机构,因此会显示警告
您需要手动绕过。在 Chrome 中,您可以使用
#allow-insecure-localhost
即可自动绕过此警告localhost
。 - 如果您使用的是不安全的网络,则此设置不安全。
- 这不一定比使用 mkcert 等本地 CA 更简单、更快捷。
- 自签名证书的行为方式与受信任证书的行为方式不同 证书。
- 如果您没有在浏览器上下文中使用此方法,则需要停用 您的服务器的证书验证。以下时间后忘记重新启用: 会导致安全问题。
![使用自签名证书时,浏览器会显示警告的屏幕截图。](https://web.developers.google.cn/static/articles/how-to-use-local-https/image/screenshots-the-warnings-953f06ad1aebc.jpg?authuser=8&hl=nb)
如果您未指定证书,React 的 和 Vue's 开发服务器 HTTPS 选项会在 。这个过程很快, 自签名证书的隐患幸运的是,你可以使用 框架的内置 HTTPS 选项,并指定本地可信证书 使用 mkcert 或类似方法创建。有关详情,请参阅 将 mkcert 与 React 搭配使用示例。
如果您使用 HTTPS 在浏览器中打开本地运行的网站, 浏览器检查本地开发服务器的证书。当 检测到您已自行签署证书 您已注册为受信任的证书授权机构。因为您是 否则,您的浏览器无法信任该证书,并且系统显示了一条警告 提示您的连接不安全。它仍会创建 HTTPS 连接,但需自行承担风险。
<ph type="x-smartling-placeholder">![浏览器不信任自签名证书的原因:示意图。](https://web.developers.google.cn/static/articles/how-to-use-local-https/image/why-browsers-dont-trust-9aa014d2da64b.jpg?authuser=8&hl=nb)
由常规证书授权机构签署的证书
您也可以使用由官方 CA 签署的证书。附带的 以下复杂功能:
- 与使用本地 CA 技术(如 mkcert 代码。
- 您需要使用由您控制的有效域名。这意味着 对于以下情况,请使用官方 CA: <ph type="x-smartling-placeholder">
反向代理
另一种通过 HTTPS 访问本地运行的网站的方式是使用 反向代理,例如 ngrok。这会带来以下风险:
- 您与之共享反向代理网址的任何人都可以访问您的本地开发 网站。这有助于向客户演示您的项目 让未经授权的人员分享敏感信息。
- 某些反向代理服务会对用量收费,因此价格可能会成为 您选择的服务。
- 浏览器中的新安全措施可能会影响 这些工具的工作原理。
标志(不推荐)
如果您在 Chrome 中使用自定义主机名(如 mysite.example
),则可以使用
标志,强制浏览器将 mysite.example
视为安全的。请避免这样做
原因如下:
- 您需要 100% 确保
mysite.example
始终解析为本地 地址。否则,存在泄露正式版凭据的风险。 - 此标志仅适用于 Chrome,因此您无法跨浏览器进行调试。
感谢所有审核者和贡献者,尤其是 Ryan Sleevi 做出的贡献和反馈。 Filippo Valsorda、Miica Mihajlija 和 Rowan Merewood。🙌