使用 HTTPS 进行本地开发

使用集合保持井井有条 根据您的偏好保存内容并进行分类。

大多数情况下，https://127.0.0.1 在开发目的下的行为类似于 HTTPS。但是，在某些特殊情况下，例如自定义主机名或跨浏览器使用安全 Cookie 时，您需要显式设置开发站点以使其行为类似于 HTTPS，从而准确表示您的站点在生产环境中的工作方式。（如果您的生产网站未使用 HTTPS，请优先切换到 HTTPS）。

此页面介绍了如何在本地使用 HTTPS 运行您的站点。

有关简要说明，请参阅 mkcert 快速参考。**

使用 mkcert（推荐）在本地使用 HTTPS 运行您的站点

要将 HTTPS 用于您的本地开发站点并访问 https://127.0.0.1 或 https://mysite.example（自定义主机名），您需要一个由您的设备和浏览器信任的实体签名的 TLS 证书，称为受信任的证书颁发机构 (CA)。浏览器会检查您的开发服务器的证书是否由受信任的 CA 签名，然后再创建 HTTPS 连接。

我们建议使用跨平台 CA mkcert 来创建和签名您的证书。有关其他有用的选项，请参阅在本地使用 HTTPS 运行您的站点：其他选项。

许多操作系统都包含用于创建证书的库，例如 openssl。但是，它们比 mkcert 更复杂且可靠性更低，并且不一定是跨平台的，这使得它们对更大的开发团队的可用性降低。

设置

1. 安装 mkcert（仅安装一次）。

   按照 说明 在您的操作系统上安装 mkcert。例如，在 macOS 上

   brew install mkcert
   brew install nss # if you use Firefox
   

2. 将 mkcert 添加到您的本地根 CA。

   在您的终端中，运行以下命令

   mkcert -install
   

   这将生成本地证书颁发机构 (CA)。您的 mkcert 生成的本地 CA 仅在本地（在您的设备上）受信任。

3. 为您的站点生成一个由 mkcert 签名的证书。

   在您的终端中，导航到您站点的根目录或您想要保存证书的任何目录。

   然后，运行

   mkcert localhost
   

   如果您使用自定义主机名（如 mysite.example），请运行

   mkcert mysite.example
   

   此命令执行两项操作

   • 为您指定的主机名生成证书。
   • 让 mkcert 签名证书。

   您的证书现已准备就绪，并由您的浏览器在本地信任的证书颁发机构签名。

4. 配置您的服务器以使用 HTTPS 和您刚刚创建的 TLS 证书。

   如何执行此操作的详细信息取决于您的服务器。以下是一些示例

   👩🏻‍💻 使用 node

   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"
   

   👩🏻‍💻 其他示例

   • Angular 开发服务器
   • Python

5. 在浏览器中打开 https://127.0.0.1 或 https://mysite.example，以仔细检查您是否在本地使用 HTTPS 运行您的站点。您不会看到任何浏览器警告，因为您的浏览器信任 mkcert 作为本地证书颁发机构。

mkcert 快速参考