何时使用 HTTPS 进行本地开发

在大多数情况下，使用 http://localhost 进行本地开发都没问题，但也有一些特殊情况。本文介绍了在哪些情况下需要使用 HTTPS 运行本地开发网站。

Maud Nalpas

另请参阅：如何在本地开发中使用 HTTPS。

在此博文中，有关 localhost 的陈述也适用于 127.0.0.1 和 [::1]，因为它们都描述了本地计算机地址，也称为“环回地址”。此外，为简单起见，未指定端口号。 因此，当您看到 http://localhost 时，应将其读作 http://localhost:{PORT} 或 http://127.0.0.1:{PORT}。

摘要

在本地开发时，默认使用 http://localhost。Service Worker、Web Authentication API 等将正常运行。 不过，在以下情况下，您需要使用 HTTPS 进行本地开发：

  • 调试混合内容问题
  • 使用 HTTP/2 及更高版本
  • 使用需要 HTTPS 的第三方库或 API

  • 使用自定义主机名

    列出了在本地开发时需要使用 HTTPS 的情况。
    何时在本地开发中使用 HTTPS。

✨ 这就是您需要了解的全部内容。如果您想了解更多详情，请继续阅读！

为什么您的开发网站应安全运行

为避免遇到意外问题，您需要让本地开发网站尽可能像正式版网站一样运行。因此，如果您的正式版网站使用 HTTPS，您希望本地开发网站的行为与 HTTPS 网站类似。

默认情况下使用“http://localhost”

浏览器会以特殊方式处理 http://localhost：虽然它是 HTTP，但其行为方式与 HTTPS 网站基本相同。

在 http://localhost 上，支持 Service Worker、传感器 API、身份验证 API、付款和需要特定安全保证的其他功能，并且这些功能与在 HTTPS 网站上的行为完全相同。

何时在本地开发中使用 HTTPS

您可能会遇到特殊情况，即 http://localhost 的行为不像 HTTPS 网站，或者您可能只是想使用不是 http://localhost 的自定义网站名称。

在以下情况下，您需要使用 HTTPS 进行本地开发：

  • 您需要本地调试仅在 HTTPS 网站上出现但在 HTTP 网站上（甚至在 http://localhost 上）不出现的问题，例如混合内容问题。
  • 您需要本地测试或重现 HTTP/2 或更新版本特有的行为。例如，如果您需要测试 HTTP/2 或更高版本上的加载性能。不支持不安全的 HTTP/2 或更新版本，即使在 localhost 上也不支持。
  • 您需要本地测试需要 HTTPS 的第三方库或 API（例如 OAuth）。

  • 您未使用 localhost，而是使用自定义主机名进行本地开发，例如 mysite.example。这通常意味着您已替换本地主机文件：

    终端修改 hosts 文件的屏幕截图
    修改主机文件以添加自定义主机名。

    在这种情况下，Chrome、Edge、Safari 和 Firefox 默认不将 mysite.example 视为安全，即使它是一个本地网站也是如此。因此，它不会像 HTTPS 网站那样运行。

  • 其他情况！此列表并未包含所有情况，但如果您遇到未在此处列出的情况，您会发现：http://localhost 上会出现问题，或者其行为与您的正式版网站不太一样。🙃

在所有这些情况下，您都需要使用 HTTPS 进行本地开发。

如何将 HTTPS 用于本地开发

如果您需要在本地开发中使用 HTTPS，请参阅如何在本地开发中使用 HTTPS。

如果您使用的是自定义主机名，请参考以下提示

如果您使用的是自定义主机名，例如，修改 hosts 文件：

  • 请勿使用裸主机名（例如 mysite），因为如果某个顶级网域 (TLD) 恰好具有相同的名称 (mysite)，您就会遇到问题。这种情况并非不太可能发生：2020 年，TLD 超过 1,500 个，并且这个列表还在不断增长。coffee、museum、travel 和许多大型公司名称（可能包括您所在的公司！）都是 TLD。点击此处查看完整列表。
  • 仅使用您自己的域名或为此目的预留的域名。如果您没有自己的网域，可以使用 test 或 localhost (mysite.localhost)。test 在浏览器中没有特殊处理，但 localhost 有：Chrome 和 Edge 支持开箱即用的 http://<name>.localhost，并且在 localhost 安全运行的情况下，它也会安全运行。试用：在 localhost 上运行任意网站，并在 Chrome 或 Edge 中访问 http://<whatever name you like>.localhost:<your port>。Firefox 和 Safari 也可能很快会支持此功能。您之所以可以这样做（拥有 mysite.localhost 等子网域），是因为 localhost 不仅是主机名，还是完整的顶级网域，例如 com。

了解详情

非常感谢所有审核人员的贡献和反馈，尤其是 Ryan Sleevi、Filippo Valsorda、Milica Mihajlija、Rowan Merewood 和 Jake Archibald。🙌

主打图片由 Unsplash 上的 @moses_lee 拍摄，经过编辑。