React项目HTTPS访问出现ERR_SSL_PROTOCOL_ERROR问题求助

首先明确：控制台的crbug/1173575, non-JS module files deprecated.提示是Chrome对非JS模块文件的废弃警告，和SSL协议错误无关，可以忽略。

针对你的HTTPS问题，按以下步骤排查：

1. 检查Node服务的HTTPS配置是否正确 #

确保启动服务时正确加载了证书和私钥，常见错误包括路径错误、证书/私钥不匹配、格式不符（比如未使用PEM格式）。

示例正确配置代码：

const https = require('https');
const fs = require('fs');

const options = {
  key: fs.readFileSync('./private-key.pem'),
  cert: fs.readFileSync('./certificate.pem')
};

https.createServer(options, (req, res) => {
  res.writeHead(200);
  res.end('HTTPS server running');
}).listen(443);

• 确认private-key.pem和certificate.pem的路径为绝对路径或相对于服务启动目录的正确路径
• 用openssl验证证书与私钥是否匹配：

  openssl x509 -noout -modulus -in certificate.pem | openssl md5
  openssl rsa -noout -modulus -in private-key.pem | openssl md5
  

  两个命令输出的哈希值必须一致，否则证书和私钥不匹配。

2. 检查Node版本兼容性 #

重新安装Node后版本可能变更，部分依赖（如MSAL相关包）可能对Node版本有特定要求：

• 运行node -v查看当前版本，对比项目package.json中engines字段的版本要求
• 版本不匹配时，用nvm切换到指定版本：

  nvm install <指定版本号>
  nvm use <指定版本号>
  

3. 重置项目依赖配置 #

Node重装后部分依赖可能出现配置异常，可重置依赖：

• 删除node_modules和package-lock.json（或yarn.lock），重新安装依赖：

  rm -rf node_modules package-lock.json
  npm install
  

• 检查项目中的代理/反向代理配置（如webpack-dev-server、nginx），确保HTTPS代理规则无协议冲突。

4. 确认本地证书被浏览器信任 #

若使用自签名证书，即使更新证书也需手动添加到浏览器信任列表：

• Chrome中访问chrome://settings/certificates，导入证书并设置为信任
• 开发环境下可临时点击地址栏“不安全”提示，选择“高级”->“继续访问”

5. 排查端口与防火墙问题 #

• 确认443端口（或自定义HTTPS端口）未被其他程序占用：

  # Windows系统
  netstat -ano | findstr :443
  # macOS/Linux系统
  lsof -i :443
  

• 临时关闭本地防火墙，测试是否恢复正常，排除端口拦截问题。

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