本文介绍如何利用 javascript 在浏览器端间接检测外部域名是否可达，绕过 cors 限制，适用于判断用户本地网络是否能访问目标站点（例如因 isp 屏蔽导致不可达），核心思路是通过加载无需跨域权限的公共资源（如 favicon.ico）并监听加载结果。
本文介绍如何利用 javascript 在浏览器端间接检测外部域名是否可达，绕过 cors 限制，适用于判断用户本地网络是否能访问目标站点（例如因 isp 屏蔽导致不可达），核心思路是通过加载无需跨域权限的公共资源（如 favicon.ico）并监听加载结果。
在前端开发中，有时需要向用户展示第三方资源链接（如文档、工具网站、API 控制台等），但这些链接可能因地区政策、ISP 屏蔽或 DNS 污染等原因，在特定客户端完全不可达。此时，若直接发起 fetch 或 XMLHttpRequest 请求，会受限于同源策略和 CORS 机制——即使仅需判断“是否能连通”，也会因预检失败或跨域拒绝而中断，且无法获取网络层错误详情（如连接超时、DNS 失败、RST 包拦截等）。
一个轻量、可靠且兼容性良好的替代方案是：利用 <img> 标签加载一个已知存在、公开可访问的静态资源（如 /favicon.ico）。该方法不触发 CORS 预检（只要目标服务器未显式设置 Access-Control-Allow-Origin: null 等限制），浏览器允许跨域加载图片资源，并会准确触发 onload（成功）或 onerror（失败）事件，从而反映底层网络连通性。
以下是一个生产就绪的检测示例：
function checkDomainReachable(url, timeout = 5000) {
return new Promise((resolve) => {
const img = new Image();
const cacheBuster = `?t=${Date.now()}`;
const faviconUrl = new URL('/favicon.ico', url).href + cacheBuster;
const timer = setTimeout(() => {
img.onload = img.onerror = null;
resolve(false);
}, timeout);
img.onload = () => {
clearTimeout(timer);
resolve(true);
};
img.onerror = () => {
clearTimeout(timer);
resolve(false);
};
img.src = faviconUrl;
});
}
// 使用示例
checkDomainReachable('https://example.com')
.then(isReachable => {
console.log(isReachable ? '✅ 可访问' : '❌ 不可达（可能被屏蔽或离线）');
});✅ 优势说明：
- 完全运行于客户端，无需后端代理；
- 不依赖 CORS，规避了跨域报错干扰；
- 利用浏览器原生加载机制，能真实反映用户侧网络可达性（包括 DNS 解析、TCP 连接、TLS 握手及 HTTP 响应状态）；
- 对目标站点无侵入性（仅请求 favicon.ico，通常体积小、缓存友好）。
⚠️ 注意事项：
- 目标站点必须提供可公开访问的 favicon.ico（HTTP 状态码 200），若返回 404/403 或重定向至登录页，将触发 onerror，误判为“不可达”；
- 若站点禁用了 favicon（返回 404 且无 fallback）、或强制 HTTPS 但 http:// 版本被屏蔽，需确保传入协议正确的 URL；
- 部分浏览器对频繁 favicon 请求有节流策略，建议添加防抖或限频逻辑；
- 此方法无法区分“域名不存在”“连接超时”“证书错误”等具体原因，仅提供布尔结果；如需更细粒度诊断，需结合 Service Worker 或后端探测服务。
综上，<img> 探活法是一种简洁、实用、符合 Web 标准的客户端可用性探测手段，特别适合在资源列表渲染前动态灰掉/隐藏不可达链接，显著提升用户体验与界面可信度。
