如何通过 JavaScript 客户端检测外部网站的可访问性-js教程-PHP中文网

如何通过 JavaScript 客户端检测外部网站的可访问性

本文介绍一种绕过 CORS 限制、仅检测外部域名是否对当前用户可达的轻量级方法——利用标签加载远程资源（如 favicon.ico）并监听其加载状态，无需获取实际内容。

本文介绍一种绕过 cors 限制、仅检测外部域名是否对当前用户可达的轻量级方法——利用 `` 标签加载远程资源（如 favicon.ico）并监听其加载状态，无需获取实际内容。

在前端开发中，有时需要向用户展示第三方资源链接（如文档、工具站、API 控制台等），但这些资源可能因地区网络策略、ISP 屏蔽或防火墙规则，在客户端实际不可达。此时若直接跳转导致 403/404/超时，用户体验较差。值得注意的是：我们并不需要读取目标站点的内容，也不依赖 CORS 配置——只需判断该域名是否能被当前浏览器发起基础网络请求并建立连接。

一个简洁可靠的方案是：利用浏览器对元素的宽松跨域策略（图像资源默认允许跨域加载，且不触发 CORS 预检），向目标站点请求一个体积小、普遍存在的静态资源（如 /favicon.ico），并通过 onload / onerror 事件判断其可达性。

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

function checkSiteAvailability(url, timeout = 5000) {
  return new Promise((resolve) => {
    const img = new Image();
    const timer = setTimeout(() => {
      img.onload = img.onerror = null;
      resolve(false); // 超时视为不可达
    }, timeout);

    img.onload = () => {
      clearTimeout(timer);
      resolve(true);
    };

    img.onerror = () => {
      clearTimeout(timer);
      resolve(false);
    };

    // 添加时间戳防止缓存干扰（尤其当 favicon.ico 不存在但服务器返回 200 空响应时）
    const cacheBuster = `?t=${Date.now()}`;
    img.src = new URL('/favicon.ico', url).href + cacheBuster;
  });
}

// 使用示例
checkSiteAvailability('https://example.com')
  .then(isAvailable => {
    console.log(isAvailable ? '✅ 可访问' : '❌ 不可达');
  });

⚠️ 注意事项：

该方法本质是“启发式探测”，成功加载 favicon.ico 仅表明该域名 DNS 解析正常、TCP 连接可达、且服务器对 GET /favicon.ico 返回了可被图像解析器接受的响应（如 200 + 图像格式，或某些服务器返回 200 + 空响应也可能触发 onload）；
若目标站禁用 favicon、返回非图像 MIME 类型（如 text/html）、或配置了严格 Referrer Policy 导致图片加载失败，可能误判为不可达；
不适用于需验证 HTTPS 证书有效性、HTTP 状态码（如 503）、或后端 API 接口可用性的场景——此类需求应由可信服务端代理探测；
避免高频批量探测，可能被目标站点限流或记录为异常行为。

综上，探测法是一种零后端依赖、兼容性好（支持所有现代浏览器及 IE11）、且规避 CORS 的实用技巧，特别适合前端侧快速反馈链接可用性，提升交互健壮性。