默认大部分情况下，Service Workers、Web Authentication API 等都可以正常工作，本地开发不需要开启 https，直接 http://localhost 就可以。但是在下面几种情况，就需要 https 来访问。

  • cookie 配置了 secure 或者 SameSite:none 属性，那么只能开启 https 才能在请求头携带 cookie。
  • 调试 Mixed Content 问题，Mixed Content 指的是在一个通过 https 加载的页面中，尝试加载通过 http 提供的资源。
  • 使用 http/2 的一些特性，例如多路复用，头部压缩，服务器推送等功能。
  • 使用自定义主机名，例如通过 kelen.cc 来访问 localhost
  • 本地调试 OAuth 等需要 https 的第三方库

那么如何在配置本地 https 签名证书

mkcert

mkcert 可以方便为本地开发环境创建受信任的 ssl/tls 证书的过程，我们需要先安装 mkcert,只需要几条命令即可生成，下面是不同系统安装教程。

MacOs

苹果系统使用 brew 安装，命令如下：

brew install mkcert
brew install nss # 兼容 firefox或者其他基于nss的应用

Windows

Windows 推荐使用 choco 来安装，先安装 Chocolatey，打开 PowerShell，执行下面命令：

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

然后安装 mkcert

choco install mkcert

choco install mkcert

生成证书

安装好 mkcert 之后，就可以用 mkcert 来配置本地 https 证书了。首先本地安装 CA，直接点确认。

mkcert install

mkcert install

mkcert install success

安装完 CA，就可以生成本地证书了。

mkcert localhost 127.0.0.1 ::1

可以看到在当前目录下生成了两个证书，接下来只需要配置到相应的本地服务，例如 nginx ，webpack，或者 vite 即可。

为自定义主机名生成证书

我们也可以自定义主机名申请证书，执行 mkcert *.kelen.cc 命令即可。

The certificate is at "./_wildcard.kelen.cc.pem" and the key at "./_wildcard.kelen.cc-key.pem" ✅

如何开启 https

以 create-react-app 为例，在 window 上需要通过环境变量来开启，

$env:HTTPS="true"
$env:SSL_CRT_FILE="C:\Users\Administrator\localhost+2.pem"
$env:SSL_KEY_FILE="C:\Users\Administrator\localhost+2-key.pem"
npm start

mac 或者 linux 只需要一行命令：HTTPS=true SSL_CRT_FILE=cert.crt SSL_KEY_FILE=cert.key npm start

本地证书

下面是常见的前端开发启动 https 的方式。

  • webpack 开启 https 方式，配置 devServer.https 为 true 即可。
// webpack.config.js
const fs = require("fs");
const path = require("path");
module.exports = {
  // ... 其他配置
  devServer: {
    https: {
      key: fs.readFileSync("localhost+2-key.pem"),
      cert: fs.readFileSync("localhost+2.pem"),
    },
    host: "localhost",
    port: 3000,
  },
};
  • vite 开启 https 方式，配置 server.https 为 true 即可。
// vite.config.js
import { defineConfig } from "vite";
import fs from "fs";
import path from "path";
export default defineConfig({
  server: {
    https: {
      key: fs.readFileSync("localhost+2-key.pem"),
      cert: fs.readFileSync("localhost+2.pem"),
    },
    host: "localhost",
    port: 3000,
  },
});

总结

mkcert提供了便捷的本地https证书生成，使用起来非常方便，感兴趣的赶紧安装起来，一劳永逸！