本文介绍一种利用 html 图像加载机制，在不触发 cors 限制的前提下，从浏览器端异步探测外部域名是否可达的方法，适用于检查被 isp 屏蔽或网络策略拦截的第三方链接可用性。
本文介绍一种利用 html 图像加载机制，在不触发 cors 限制的前提下，从浏览器端异步探测外部域名是否可达的方法，适用于检查被 isp 屏蔽或网络策略拦截的第三方链接可用性。
在前端开发中，有时需要向用户展示一组外部参考链接（如文档、工具站、API 服务等），但这些资源可能因地区网络策略、ISP 封锁、DNS 污染或防火墙规则而在客户端不可达。此时，若尝试用 fetch 或 XMLHttpRequest 发起跨域请求，会直接被浏览器的同源策略（CORS）拦截——即使你只关心“能否建立连接”，而非响应内容。
幸运的是，HTML 的 <img> 元素（及 <link rel="icon">、<script>、<iframe> 等部分资源标签）在加载时不受 CORS 限制约束：浏览器允许发起请求并触发 onload/onerror 回调，仅用于判断资源是否可解析与加载成功，而无需读取响应体。这一特性可被安全、轻量地用于“可用性探测”。
✅ 推荐实践：使用 Image 对象探测 favicon.ico
最稳定、低侵入的方式是请求目标站点的 favicon.ico（几乎所有网站均提供且缓存友好）：
function checkDomainAvailability(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;
img.onload = () => resolve({ available: true, url: faviconUrl });
img.onerror = () => resolve({ available: false, url: faviconUrl });
// 设置超时保护（图像加载无原生 timeout，需手动控制）
const timer = setTimeout(() => {
img.onload = img.onerror = null;
resolve({ available: false, url: faviconUrl, reason: 'timeout' });
}, timeout);
img.src = faviconUrl;
// 清理：避免内存泄漏（尤其在 Promise 频繁调用时）
img.onload = img.onerror = () => clearTimeout(timer);
});
}
// 使用示例
checkDomainAvailability('https://example.com')
.then(result => {
console.log(result.available
? '✅ 域名可达，可安全展示链接'
: '❌ 域名不可达（可能被屏蔽或宕机）');
});⚠️ 注意事项与局限性
- 不保证全链路通达：该方法仅验证 DNS 解析 + TCP 连接 + HTTP 2xx/3xx 响应（对 favicon.ico）。若目标站禁用了 favicon 或返回 403/404，可能误判为“不可用”；建议优先选择已知提供 favicon 的站点。
- 无法获取状态码或错误详情：onerror 仅表示加载失败，无法区分是网络超时、DNS 失败、SSL 错误还是服务器拒绝，属于“黑盒探测”。
- 避免高频探测：频繁请求可能触发目标站风控，建议添加节流（throttle）或仅在用户交互（如悬停、点击前）触发。
- 替代资源选择：若 favicon 不可靠，可尝试 /robots.txt（文本小、通用）、/.well-known/assetlinks.json（Android 应用关联）等公开静态路径，但需确保其存在且无需认证。
✅ 总结
当 CORS 阻止常规 HTTP 探测时，借助 <img> 标签的宽松加载策略是一种合规、简洁、零后端依赖的客户端可用性检查手段。它虽非万能，但在用户体验优化（如灰显/禁用不可达链接、动态提示“该网站在您所在地区可能无法访问”）场景中极具实用价值。结合合理的超时控制与缓存规避策略，即可构建健壮的前端资源健康检查能力。
