如何使用Fetch API从出现NET::ERR_CERT_AUTHORITY_INVALID的站点获取数据

嘿，我来帮你捋捋这个问题～你遇到的两个错误本质上都是同一个核心原因：浏览器不信任目标站点的SSL证书，前端代码里的请求头设置其实解决不了这个根本问题，先给你拆解清楚：

错误原因分析 #

• NET::ERR_CERT_AUTHORITY_INVALID：说明目标站点的证书不是由浏览器信任的正规CA机构颁发的（比如是自签名证书），浏览器出于安全默认会拦截这类不安全的连接。
• net::ERR_INSECURE_RESPONSE：这是浏览器进一步拒绝处理来自不安全站点的响应，哪怕你在请求里加了Access-Control-Allow-Origin也没用——因为这个头是服务端应该返回的响应头，不是前端请求头，你在请求里设置它完全无效，反而可能干扰请求逻辑。

分场景解决方案 #

1. 开发测试环境 #

如果只是本地/测试环境用，有两种快速解决办法：

• 手动信任证书：直接在浏览器里打开目标URL，当出现证书警告时，点击「高级」→「继续访问此站点」，浏览器会把这个证书加入本地信任列表，之后Fetch请求就能正常发送了。
• 浏览器启动参数跳过验证（仅临时测试用）：比如Chrome可以用这个命令启动，全局跳过证书验证：

  chrome.exe --ignore-certificate-errors
  

  注意：这个方法非常不安全，绝对不能用于日常浏览或生产环境！

2. 生产环境 #

没有捷径，必须给目标站点配置由受信任CA颁发的正规SSL证书，比如Let's Encrypt的免费证书，这样浏览器才会认可站点的安全性，不会拦截请求。

你的代码修正点 #

除了证书问题，你的代码还有几个小错误需要调整：

• 拼写错误：reslove应该是resolve，header参数应该是headers（Fetch的配置项是复数形式）。
• 多余的请求头：Access-Control-Allow-Origin是服务端响应头，不需要在请求里设置。
• multipart/form-data头：如果用FormData作为请求体，浏览器会自动生成带boundary的正确Content-Type，手动设置反而可能出错，建议去掉。
• 身份验证：如果需要用户名密码验证，应该用Authorization头传递（比如Basic Auth）。

修正后的代码示例：

let username = "***";
let password = "***";
let url = "***";

// 正确设置请求头，仅保留必要项
let headers = new Headers({
  'Authorization': 'Basic ' + btoa(username + ':' + password)
});

let sentData = {
  method: 'POST',
  mode: 'cors',
  headers: headers,
  // 如果要上传表单数据，用FormData实例作为body
  // body: new FormData()
};

return new Promise((resolve, reject) => {
  fetch(url, sentData)
    .then(response => {
      // 先检查响应状态是否正常
      if (!response.ok) {
        throw new Error(`请求失败：${response.status}`);
      }
      return response.json();
    })
    .then(responseText => {
      resolve(responseText);
    })
    .catch(error => {
      reject(error);
    });
});

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