何时使用 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、Sensor API、Authentication API、Payments 以及 其他需要特定安全保证的功能均受支持，并且其行为与在 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 进行本地开发。

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

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

  • 请勿使用裸主机名（例如 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 不仅是主机名，还是完整的 TLD，例如 com。

了解详情

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

主打图片由 @moses_lee 在 Unsplash 上提供，经过编辑。