React HTTPS前端无法与Node.js HTTPS API通信（ERR_CERT_AUTHORITY_INVALID）

问题根源 #

你使用openssl生成的是自签名SSL证书，这类证书没有被全球浏览器信任的权威CA（证书颁发机构）签名背书，因此浏览器会判定证书无效，拦截前端的HTTPS请求。

解决方案 #

1. 生产环境：使用权威CA颁发的有效证书 #

这是唯一适合线上环境的方案，推荐使用Let's Encrypt的免费证书：

• 先给你的服务器IP（122.122.122.122）绑定一个域名（比如api.yourdomain.com），因为多数权威CA（包括Let's Encrypt）不支持直接给裸IP颁发证书。
• 安装Certbot工具，根据你的服务器系统生成对应域名的SSL证书。
• 将生成的新证书文件（通常是fullchain.pem和privkey.pem）替换现有代码中的ssl-certificate.crt和ssl.key，修改Node.js代码中的文件路径：

  const key = fs.readFileSync("./privkey.pem");
  const cert = fs.readFileSync("./fullchain.pem");
  

• 重启Node.js服务，前端请求即可正常进行。

2. 测试/开发环境：临时信任自签证书 #

仅用于本地测试，绝对不能用于生产：

• 直接在浏览器地址栏访问https://122.122.122.122:4000，会弹出证书风险提示。
• 点击「高级」选项，选择「继续访问不安全的网站」（不同浏览器措辞略有不同），此时浏览器会临时信任该证书，前端的fetch请求就能正常发送。

3. 测试环境：将自签证书导入浏览器信任列表 #

如果需要长期在测试环境使用，可以手动将证书加入浏览器的受信任根CA列表：

• 找到你生成的ssl-certificate.crt文件。
• Chrome：设置 → 隐私和安全 → 安全 → 管理证书 → 受信任的根证书颁发机构 → 导入，选择crt文件并完成导入。
• Firefox：选项 → 隐私与安全 → 证书 → 查看证书 → 证书机构 → 导入，选择crt文件，勾选「信任由此证书颁发机构标识的网站」后确认。

额外注意 #

前端部署在HTTPS环境（https://my.web.app），后端必须使用HTTPS服务，否则会触发浏览器的「混合内容」拦截，你当前的后端配置已经满足HTTPS要求，只需解决证书信任问题即可。

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