使用<a>标签发起的服务器请求未在开发者工具Network面板显示

你使用的下载代码如下：

downloadFileUsingAnchor (requestUrl) {
    const a = document.createElement('a')
    a.style.display = 'none'
    a.href = requestUrl
    a.download = 'logs.zip'
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
}

这种情况的原因主要有三个：

• 浏览器下载管理器的独立处理逻辑：当标签设置了download属性，且目标资源是浏览器无法直接渲染的文件（如zip、压缩包等）时，请求会由浏览器的下载管理器直接处理，而非通过普通的网络请求通道。Network面板默认只追踪页面渲染、XHR/fetch等常规请求，这类由下载管理器处理的请求不会被记录。
• 缓存命中：如果该资源已经被浏览器缓存过，点击标签时浏览器会直接从本地缓存读取文件，不会发起新的网络请求，自然不会出现在Network面板中。
• 资源类型的特殊处理：对于浏览器无法解析展示的文件类型，浏览器会跳过常规的请求追踪流程，直接触发下载操作，所以Network面板不会捕获到这类请求。

验证方法： #

• 打开浏览器的下载记录（通常按Ctrl+J快捷键），可以看到该下载请求的详细信息，包括URL和状态。
• 在Network面板勾选Disable cache选项，禁用缓存后重新触发下载，若之前是缓存导致的请求不显示，此时就能看到对应的网络请求。
• 临时移除download属性，让浏览器尝试直接打开资源（比如将zip换成图片或文本文件），此时Network面板会显示该请求（仅作验证，不适合实际下载场景）。

内容的提问来源于stack exchange，提问作者Saurabh Batra