带download属性的锚点遇HTTP 404时Firefox异常行为咨询

现象与问题 #

在同源域名下使用带有download属性的<a>标签，当目标URL返回HTTP 404（文件未找到）时：

• 基于Chromium的浏览器（如Chrome、Edge）会在下载面板显示Download failed - No file的明确错误提示
• Firefox无任何错误提示，仅打开空白新标签页

需明确该现象是Firefox的正常行为、Bug还是操作失误，同时满足以下需求：

1. 非200 HTTP状态码时通知用户
2. 尽量避免使用JavaScript
3. 下载URL遵循同源策略

结论 #

这是Firefox的兼容性行为偏差，并非你的操作失误。你提交的Bug（编号1876043）已被Mozilla官方收录，属于待修复的浏览器兼容性问题。

无JavaScript的临时解决方案 #

在完全不使用JS的前提下，可通过服务端配置实现基础的错误通知：

• 配置自定义404错误页：在同源服务器上设置自定义404页面，页面内明确提示「文件不存在，下载失败」，并添加返回原页面的链接。当Firefox打开空白标签时，会加载该自定义页面，用户即可看到错误提示。
• 优化<a>标签属性：为链接添加rel="noopener noreferrer"，避免空白标签带来的潜在安全风险，同时让浏览器行为更可控。

可选：少量JS增强方案（符合同源策略） #

若允许引入极少量JS，可实现更精准的错误拦截与提示：

document.querySelectorAll('a[download]').forEach(link => {
  link.addEventListener('click', async (e) => {
    const resp = await fetch(link.href, { method: 'HEAD' });
    if (!resp.ok) {
      e.preventDefault();
      alert('下载失败：文件不存在或无法访问');
    }
  });
});

该代码会在点击下载链接前发送HEAD请求校验状态码，若返回非200状态则阻止默认跳转，并弹出错误提示，完全符合同源策略要求。

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