如何捕获ERR_CERT_AUTHORITY_INVALID并避免Axios请求缓存超时

一、解决缓存导致的虚假快速超时问题 #

Chrome会缓存不可达主机的状态，导致后续请求无需完整连接尝试就直接返回失败。要强制每次发起完整请求，可通过以下方式禁用请求缓存：

• Axios配置：在请求或全局配置中添加缓存禁用头：

const axiosInstance = axios.create({
  headers: {
    'Cache-Control': 'no-store',
    'Pragma': 'no-cache'
  }
});

no-store会强制浏览器不缓存任何请求/响应数据，确保每次请求都走完整的网络流程。

• 若使用原生Fetch：直接设置cache: 'no-store'配置项，效果更直接：

fetch('https://your-iot-device-url', {
  cache: 'no-store'
});

二、区分证书错误与其他网络问题 #

Axios在浏览器环境下会将证书错误（如ERR_CERT_AUTHORITY_INVALID）包装为通用的ERR_NETWORK错误，无法直接区分。此时建议直接使用原生XMLHttpRequest或Fetch API，它们能暴露更底层的错误细节：

方案1：使用Fetch API捕获证书错误

async function connectToIoT(url) {
  try {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 10000); // 10秒超时

    const response = await fetch(url, {
      method: 'GET',
      cache: 'no-store',
      signal: controller.signal
    });

    clearTimeout(timeoutId);
    if (!response.ok) throw new Error(`HTTP错误: ${response.status}`);
    return await response.text();
  } catch (error) {
    if (error.name === 'AbortError') {
      throw new Error('请求超时');
    }
    // 匹配证书错误特征
    if (error.message.includes('ERR_CERT_AUTHORITY_INVALID')) {
      throw new Error('证书未被信任，请安装设备提供的证书');
    }
    throw new Error('网络连接失败');
  }
}

方案2：使用原生XMLHttpRequest捕获证书错误

function connectToIoT(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.setRequestHeader('Cache-Control', 'no-store');
    xhr.timeout = 10000; // 10秒超时

    xhr.onload = () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.response);
      } else {
        reject(new Error(`HTTP错误: ${xhr.status}`));
      }
    };

    xhr.onerror = () => {
      // 证书错误会触发status=0，且错误消息包含特定标识
      const errorMsg = xhr.error?.message || '';
      if (errorMsg.includes('ERR_CERT_AUTHORITY_INVALID')) {
        reject(new Error('证书未被信任，请安装设备提供的证书'));
      } else {
        reject(new Error('网络连接失败'));
      }
    };

    xhr.ontimeout = () => {
      reject(new Error('请求超时'));
    };

    xhr.send();
  });
}

关键说明 #

• 浏览器的安全机制会拦截未信任证书的请求，这类错误不会进入Axios的常规错误处理流程，因此必须借助原生API获取更具体的错误信息。
• no-store是禁用缓存最可靠的方式，比添加随机查询参数更有效，因为它直接告诉浏览器不缓存任何请求相关数据，避免主机不可达状态被缓存。

内容的提问来源于stack exchange，提问作者Wouter van Koppen