ping属性触发的是浏览器发起的、不可拦截的、无凭据的POST请求，需满足href为跨源绝对URL、用户真实点击、rel="noreferrer"等条件才生效，同源时被静默丢弃，且不走CORS与Service Worker。
ping 属性触发的是什么请求？
点击 <a> 标签时，ping 属性会触发一个 **浏览器发起的、不可拦截的、无凭据的 POST 请求**（HTTP/HTTPS），目标是 ping 指定的 URL。它不是 fetch 或 XMLHttpRequest，无法带自定义 header、无法读响应、无法 catch 错误，也不走 Service Worker。
这意味着：你不能用它传 token、不能依赖返回数据、不能做鉴权校验——它只适合埋点上报这类“发了就行”的轻量场景。
怎么写才真正生效？
必须同时满足三个条件，ping 才会发出请求：
-
ping值必须是**绝对 URL**（如https://log.example.com/click），相对路径（/api/ping）或协议相对路径（//log.example.com/click）均被忽略 - 用户点击的必须是**跨源链接**（即
href指向的域名 ≠ 当前页面域名），同源链接下 Chrome/Firefox 都会静默丢弃ping - 当前页面需启用
rel="noreferrer"或rel="noopener"（现代浏览器对ping的安全限制要求），否则可能被忽略
正确示例：<a href="https://other-site.com/page" ping="https://log.example.com/click" rel="noreferrer">跳转并上报</a>
立即学习“前端免费学习笔记（深入）”；
为什么收不到后端请求？常见排查点
后端收不到请求，大概率不是代码写错了，而是浏览器根本没发出去。检查以下几点：
- 打开 DevTools → Network 标签页 → 点击链接后筛选
Other或Document类型，**不要只看 XHR/Fetch** ——ping请求归类为Other，且没有预检（CORS 不适用） - 确认当前页面协议与
pingURL 协议一致（HTTP 页面不能 ping HTTPS 地址，反之亦然） - 某些浏览器扩展（如广告屏蔽器、隐私插件）会主动屏蔽
ping请求，可尝试无痕模式验证 - 服务端需接受空 body 的 POST 请求，并返回 2xx（返回非 2xx 会被浏览器静默忽略，不报错）
替代方案：什么时候该放弃 ping，改用 JS 主动上报？
当需要以下任一能力时，ping 就不合适了：
- 上报用户 ID、设备信息、时间戳等动态参数
- 确保请求成功（比如失败重试、错误告警）
- 在同源跳转中也要上报（
ping在同源下完全无效） - 需要控制请求时机（比如点击后延迟 100ms 上报，避免影响导航）
此时直接监听 click 事件 + fetch() 更可靠：document.querySelector('a[data-track]').addEventListener('click', e => { fetch('/api/click', { method: 'POST', body: JSON.stringify({ url: e.target.href }) }); });
注意：如果要避免阻塞跳转，得用 event.preventDefault() + 手动 window.location，但会牺牲部分 SEO 和原生体验。
