如何在JavaScript中捕获net::ERR_NAME_NOT_RESOLVED错误？

嘿，我完全懂你遇到的这个痛点——浏览器控制台明明能看到net::ERR_NAME_NOT_RESOLVED的提示，但代码里就是拿不到这个具体错误信息，这其实是浏览器出于安全和隐私的刻意限制，不是你的代码写得有问题。

先聊聊你试过的两种方案为什么行不通：

• AJAX(XMLHttpRequest/fetch)：首先跨域请求会触发CORS限制，就算是同域请求，浏览器也不会把DNS解析失败这类底层网络错误暴露给JavaScript。DNS属于系统级别的网络操作，浏览器怕攻击者利用这些错误信息探测内网域名或者做其他恶意操作，所以只会告诉你“请求失败了”，不会给具体原因。
• 图片加载：和AJAX一样，虽然控制台会打印DNS错误，但error事件对象里没有任何能区分“DNS解析失败”和“图片不存在”“网络断了”的标识，你只能知道加载失败，没法确定具体是啥问题。

那有没有办法解决这个需求呢？给你两个思路：

1. 最可靠的方案：服务器端代理 #

我知道你担心几百个请求的压力，但其实可以优化：比如让用户把所有要测试的端点一次性发给服务器，服务器用后台语言的DNS查询工具（比如Node.js的dns模块、Python的dns.resolver）批量检查，然后把结果返回给用户。这样不仅能准确判断DNS是否解析成功，还能避免浏览器的各种限制，而且服务器端处理批量请求的效率其实比前端一个个发要高得多——你可以做请求合并、异步队列，甚至缓存常用域名的解析结果，减少重复查询。

2. 前端退而求其次的推测方案 #

如果一定要在前端做，只能通过超时判断间接推测DNS解析失败的可能。因为DNS解析通常是请求中最快完成的步骤之一，如果请求超时特别快（比如2-3秒内），大概率是DNS解析失败了（当然也不排除极端网络延迟的情况，只能作为参考）。

用fetch结合AbortController实现的例子：

async function checkEndpoint(url) {
  const controller = new AbortController();
  // 设置2秒超时，可根据网络情况调整
  const timeoutId = setTimeout(() => controller.abort(), 2000);

  try {
    // 用no-cors模式绕过CORS限制，但此时无法读取响应内容
    const response = await fetch(url, { 
      signal: controller.signal,
      mode: 'no-cors'
    });
    clearTimeout(timeoutId);
    // 能走到这一步，说明DNS解析成功了（请求至少发出去了）
    return { status: 'dns_resolved', url };
  } catch (err) {
    clearTimeout(timeoutId);
    if (err.name === 'AbortError') {
      // 超时，推测是DNS解析失败或者网络极端差
      return { status: 'likely_dns_failure', url };
    } else {
      // 其他错误，比如CORS（但用了no-cors的话大概率不会触发这个）、连接重置等
      return { status: 'unknown_error', url, error: err.message };
    }
  }
}

// 测试示例
checkEndpoint('http://baddomain.ddd').then(result => console.log(result));

注意：这个方法不是100%准确，只能作为辅助判断，不能替代服务器端的准确检测。

关于WebAssembly的疑问 #

WA运行在浏览器的沙箱环境里，和JavaScript一样受浏览器的安全策略限制，它也没法直接访问底层的DNS解析结果，所以用WA也解决不了这个问题哦。

总结一下：如果需要准确判断DNS是否解析成功，服务器端代理是唯一靠谱的方案；前端只能做间接的推测，没法拿到net::ERR_NAME_NOT_RESOLVED这个具体错误。

备注：内容来源于stack exchange，提问作者jgilmore