React本地HTTPS出现net::ERR_CERT_AUTHORITY_INVALID错误求助

一、自签名证书实现本地HTTPS的核心难点 #

• 信任链兼容问题：自签名证书无公共CA背书，必须让系统和浏览器同时信任生成证书的根CA，仅单独信任服务器证书无效。不同系统、浏览器的信任逻辑差异大，容易出现局部生效但全局不兼容的情况。
• 域名匹配要求严格：浏览器对HTTPS证书的域名匹配规则苛刻，localhost、127.0.0.1、自定义本地域名（如local.dev）都需要在证书的Subject Alternative Name字段中明确列出，缺失任一目标地址都可能触发证书错误。
• 跨环境一致性差：Windows、macOS、Linux的证书管理方式各不相同，团队成员各自配置时容易出现信任失效问题，统一维护成本较高。

二、解决net::ERR_CERT_AUTHORITY_INVALID错误的具体方案 #

1. 重新确认根CA的信任状态
   • 直接运行mkcert -install，该命令会自动将mkcert生成的根CA安装到系统和浏览器的信任列表中，比手动导入更可靠。
   • 手动校验：Windows打开「证书管理器」，在「受信任的根证书颁发机构」中查找mkcert开头的证书；macOS打开「钥匙串访问」，在「系统-证书」中找到对应根CA，右键选择「显示简介」，将「信任」选项改为「始终信任」。
2. 验证证书的域名覆盖范围
   • 执行openssl x509 -in localhost.pem -text -noout，查看输出中的Subject Alternative Name字段，确认包含DNS:localhost、IP Address:127.0.0.1、IP Address:::1（IPv6）。若缺失，重新生成证书：mkcert localhost 127.0.0.1 ::1。
3. 核对API请求的目标地址
   • 错误中的${SERVER_API}可能指向了非localhost的地址（如局域网IP、自定义域名），但你的证书仅签署了localhost，导致域名不匹配。需确保API地址与证书中的域名完全一致，若使用https://192.168.x.x这类局域网地址，证书中必须包含该IP。
4. 彻底清除浏览器的HTTPS缓存
   • Edge浏览器中，除清除普通缓存外，还需访问edge://net-internals/#hsts页面，找到「删除域安全策略」，输入localhost后点击删除，避免浏览器缓存旧的证书信任策略。
5. 检查项目启动命令的证书路径
   • 确认SSL_CRT_FILE和SSL_KEY_FILE的路径正确，建议使用绝对路径，或确保证书文件放置在项目根目录下。若路径错误，React会自动生成临时证书，必然触发证书权威无效的错误。

三、对其他团队成员的影响 #

• 会影响。每个成员都需要独立完成以下操作：
  1. 安装mkcert工具；
  2. 运行mkcert -install信任根CA；
  3. 生成自己的localhost证书，或使用团队共享的证书（注意切勿共享根CA的私钥）；
  4. 配置自身项目的启动命令，指向正确的证书路径。
• 不同操作系统的配置细节有差异，例如Linux用户需将根CA复制到/usr/local/share/ca-certificates/，再运行sudo update-ca-certificates更新系统信任。

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