React本地运行报错：UNABLE_TO_VERIFY_LEAF_SIGNATURE 的解决办法

前端

2023-06-05 07:13:10

在 React 本地开发中解决“UNABLE_TO_VERIFY_LEAF_SIGNATURE”错误

在 React 的本地开发之旅中，“UNABLE_TO_VERIFY_LEAF_SIGNATURE”错误宛如一块绊脚石，阻碍我们项目的顺利启动。但别担心，这篇指南将化身你的引路人，带领你踏上解决之道，扫清障碍，畅通无阻地开启你的开发之旅。

错误的根源

这个恼人的错误源自 Create React App (CRA)，React 的开发环境，它使用自签名的证书来保障本地开发环境的安全。然而，某些操作系统和安全软件可能会对自签名证书发出质疑，将其视为不法之徒，从而引发这个错误。

解决方案宝典

为了消除这个错误，你可以尝试以下妙招：

安全软件体检： 审视你的操作系统和安全软件设置，确保它们没有对自签名证书亮起红灯。如果发现有，请尝试将 CRA 的证书加入白名单，化干戈为玉帛。
HTTPS 的拥抱： 在启动 React 项目时，让 HTTPS 协议成为你的盟友，取代 HTTP。这可以通过在“package.json”文件中添加“https”字段来实现，为你的项目披上安全的盔甲。
自签名证书的妙用： 如果上述方法难解燃眉之急，那么自签名证书可以成为你的救星。使用“openssl”命令生成自签名证书，然后将其添加到 CRA 的证书存储中，让你的项目得到安全保障。

示例代码锦囊

以下代码示例将助你一臂之力，顺利解决“UNABLE_TO_VERIFY_LEAF_SIGNATURE”错误：

// 安全软件设置检查

// Windows：
certmgr.msc

// macOS：
Security & Privacy -> General -> Allow apps downloaded from: Anywhere

// 添加证书到白名单

// Windows：
certmgr.msc -> Trusted Root Certification Authorities -> Certificates -> Import

// macOS：
Security & Privacy -> General -> Allow apps downloaded from: Anywhere -> Add...

// 使用 HTTPS 协议

"scripts": {
  "start": "react-scripts start --https"
}

// 使用自签名证书

openssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem
mkdir -p ~/.react-scripts/ssl
cp key.pem ~/.react-scripts/ssl/key.pem
cp cert.pem ~/.react-scripts/ssl/cert.pem