运行React项目出现error:0308010C错误，求有效解决方法

这个错误是Node.js 17+版本与旧版react-scripts的兼容性问题——Node.js 17及以上默认采用OpenSSL 3.0，而旧版react-scripts依赖的webpack使用了OpenSSL 3.0不再支持的MD4哈希算法，从而触发报错。以下是几种可行的解决方案：

临时环境变量启动 #

在执行启动命令前添加指定环境变量，临时启用旧版OpenSSL提供器：

• Windows（命令提示符）：

  set NODE_OPTIONS=--openssl-legacy-provider && npm run dev
  

• Windows（PowerShell）：

  $env:NODE_OPTIONS="--openssl-legacy-provider"; npm run dev
  

• macOS/Linux：

  NODE_OPTIONS=--openssl-legacy-provider npm run dev
  

固定启动脚本中的环境变量 #

修改package.json的scripts字段，将环境变量整合到启动命令中，避免每次手动输入：

非Windows系统或已安装cross-env时 #

"scripts": {
  "start": "NODE_OPTIONS=--openssl-legacy-provider react-scripts start",
  "dev": "你的服务器启动命令 && NODE_OPTIONS=--openssl-legacy-provider react-scripts start"
}

Windows系统（需跨平台兼容） #

先安装cross-env依赖：

npm install cross-env --save-dev

再修改脚本：

"scripts": {
  "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider react-scripts start",
  "dev": "你的服务器启动命令 && cross-env NODE_OPTIONS=--openssl-legacy-provider react-scripts start"
}

降级Node.js版本 #

将Node.js切换到16.x或更低版本（该版本默认使用OpenSSL 1.1.1，不会触发此问题），推荐用nvm（Node版本管理器）操作：

1. 安装nvm后，执行：

   nvm install 16
   

2. 切换到16.x版本：

   nvm use 16
   

3. 重新运行项目：

   npm run dev
   

升级react-scripts到最新版本 #

如果项目允许，升级react-scripts到最新版，新版已修复该兼容性问题：

npm install react-scripts@latest --save

安装完成后重新启动项目即可。

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