ReactJS调用带自签名证书的第三方API解决IN_SECURE_CONNECTION错误

首先得明确：浏览器端和Node.js/SSR环境的处理方式完全不同，我分开给你讲清楚：

一、浏览器端（纯前端React应用） #

浏览器出于安全考虑，默认会拒绝所有未被信任的证书（包括自签名的），Fetch API本身没有提供配置来强制接受自签名证书的选项——这是浏览器的安全限制，不是Fetch的问题。

可行的解决方案： #

• 给浏览器安装自签名证书（推荐，适用于开发/测试）
  把你的自签名证书导入到浏览器的信任根证书列表里，这样浏览器就会认可这个证书，Fetch调用就不会报错了。具体步骤根据浏览器不同略有差异，比如Chrome：设置→隐私和安全→安全→管理证书→导入证书并设为受信任的根证书颁发机构。

• 开发环境使用代理（Create React App/Next.js等）
  如果是用Create React App搭建的项目，可以在package.json里配置proxy字段，把API请求代理到后端，由后端处理证书信任问题：

  {
    "proxy": "https://your-self-signed-api-domain.com"
  }
  

  要是需要更灵活的代理配置，还可以用http-proxy-middleware，在配置里设置secure: false来忽略证书错误。

• Chrome开发环境临时绕过（仅限本地开发，别用于生产）
  关闭所有Chrome窗口，然后用命令行启动Chrome并添加参数：

  # Windows
  chrome.exe --ignore-certificate-errors --ignore-urlfetcher-cert-requests
  
  # Mac
  open -a "Google Chrome" --args --ignore-certificate-errors --ignore-urlfetcher-cert-requests
  

  注意：这个方法会让Chrome忽略所有证书错误，非常不安全，只适合本地开发测试用，绝对不能用于生产环境。

二、Node.js/SSR环境（比如Next.js API路由、React SSR服务端渲染） #

如果是在Node.js环境中用Fetch（比如服务端的API请求），可以通过Node的https模块配置来信任自签名证书：

方法1：临时禁用证书验证（不推荐生产） #

在调用Fetch前添加环境变量配置，临时关闭证书验证：

// 在调用Fetch前添加这段代码
process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';

// 然后正常调用Fetch
fetch('https://your-self-signed-api-domain.com/api/xxx')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

注意：这个方法会让Node忽略所有证书验证，生产环境绝对不能用，存在严重安全风险。

方法2：指定信任的自签名证书（推荐生产/测试） #

把你的自签名证书（.pem或.crt文件）放在项目里，然后通过https.Agent来配置仅信任该证书：

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

// 读取自签名证书文件
const ca = fs.readFileSync('./path/to/your-self-signed-cert.crt');

// 创建自定义https Agent
const agent = new https.Agent({
  ca: ca,
  rejectUnauthorized: true // 保持验证逻辑，只信任我们指定的证书
});

// 调用Fetch时传入自定义agent
fetch('https://your-self-signed-api-domain.com/api/xxx', {
  agent: agent
})
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

这种方式安全性更高，适合必须使用自签名证书的测试或生产场景。

重要提醒 #

生产环境绝对不要使用自签名证书，应该使用正规CA颁发的免费或付费证书（比如Let's Encrypt的免费证书），避免安全风险和浏览器兼容性问题。

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