Safari更新后无法通过本地域名别名HTTPS访问本地React应用

问题背景 #

Safari更新后，无法通过some.local.com这类本地域名别名以HTTPS访问React开发服务器，但https://localhost:<端口>能正常访问；Chrome和Firefox无此问题，证书由mkcert生成且已被信任，此前功能正常。

排查与解决步骤 #

1. 确认Safari对mkcert根证书的信任状态 #

Safari更新可能重置了证书信任配置：

• 打开Safari偏好设置 → 隐私与安全性 → 管理证书
• 找到mkcert生成的根证书（名称通常含mkcert）
• 确保该证书的SSL信任设置为「始终信任」

2. 清除Safari的HSTS缓存 #

Safari可能缓存了旧的HTTPS严格传输安全规则：

• 开启Safari开发者菜单：偏好设置 → 高级 → 勾选「显示开发菜单」
• 点击顶部菜单栏「开发」→ 清空缓存
• 终端执行命令强制清除HSTS缓存：

  defaults write com.apple.Safari com.apple.Safari.ContentPageGroupIdentifier.WebKit2StoringHTTPSUpgradePoliciesEnabled -bool false
  defaults write com.apple.Safari com.apple.Safari.ContentPageGroupIdentifier.WebKit2HTTPSUpgradeEnabled -bool false
  

  重启Safari后，可再恢复设置：

  defaults write com.apple.Safari com.apple.Safari.ContentPageGroupIdentifier.WebKit2StoringHTTPSUpgradePoliciesEnabled -bool true
  defaults write com.apple.Safari com.apple.Safari.ContentPageGroupIdentifier.WebKit2HTTPSUpgradeEnabled -bool true
  

3. 修改webpack devServer的requestCert配置 #

当前requestCert: true会要求客户端提供证书，Safari可能无法适配：

• 将配置中的requestCert改为false，本地开发无需客户端证书验证：

  server: {
    type: "https",
    options: {
      key: readFileSync(resolve(__dirname, "../certs/_wildcard.local.com+3-key.pem")),
      cert: readFileSync(resolve(__dirname, "../certs/_wildcard.local.com+3.pem")),
      ca: readFileSync("<output of mkcert -CAROOT>/rootCA.pem"),
      requestCert: false, // 修改此处
    },
  },
  

  修改后重启开发服务器，重新测试域名别名访问。

4. 调整hosts解析与服务器监听配置 #

Safari可能优先使用IPv6解析，但服务器未监听IPv6地址：

• 先临时注释hosts文件中的::1 some.local.com，仅保留IPv4解析：

  # ::1 some.local.com
  127.0.0.1 some.local.com
  

  测试是否能正常访问，若可行，在webpack devServer中添加IPv6监听配置：

  server: {
    host: '::', // 监听所有IPv4/IPv6地址
    type: "https",
    options: {
      // 现有证书配置
    },
  },
  

  恢复hosts文件的IPv6解析后，重启服务器再次测试。

5. 验证证书的SAN字段 #

确保mkcert生成的证书包含目标域名的Subject Alternative Name：

• 终端执行命令查看证书SAN信息：

  openssl x509 -in ../certs/_wildcard.local.com+3.pem -text -noout | grep DNS
  

  确认输出包含DNS:*.local.com或DNS:some.local.com，若缺失则重新生成证书：

  mkcert "some.local.com" "*.local.com" localhost 127.0.0.1 ::1
  

  替换webpack中的证书文件后重启服务器。

内容的提问来源于stack exchange，提问作者Flo Ragossnig