download属性在非同源时失效是浏览器基于同源策略的硬性安全限制，非bug；跨域时该属性被静默忽略，点击退化为跳转或预览，可靠解法是fetch+blob生成同源url或服务端返回content-disposition响应头。
download属性在非同源时为什么失效
浏览器明确禁止 download 属性对跨域 URL 生效——这是硬性安全策略，不是 bug。只要 href 的协议、域名、端口与当前页面不完全一致（比如 https://a.com 页面里写 href="https://cdn.a.com/file.pdf"，子域不同也算跨域），点击后 download 就被静默忽略，行为退化为普通导航或预览。
常见现象包括：点击后 PDF 在新标签页打开、CSV 被渲染成表格、控制台出现 download attribute has no effect on cross-origin links 提示（但不报错）、右键“另存为”才弹窗而 click() 不触发下载。
本地开发用 file:// 协议时，所有 download 都无效，必须起 HTTP 服务验证。
fetch + Blob 是最通用的绕过方案
核心思路是把远程文件内容拉到前端，转成 Blob，再用 URL.createObjectURL() 生成一个同源的临时 URL，此时 download 属性 100% 可控。
关键点：
-
fetch()必须拿到完整响应体，用response.blob()，不是text()或json() -
Blob构造时务必传入正确的type，比如"application/pdf"、"text/csv;charset=utf-8"；类型错会导致 Chrome 默认保存为.txt或打不开 - 临时
<a></a>元素必须挂载到document.body后再调用.click()，否则部分浏览器会拦截（视为非用户手势） - 每次调用后必须执行
URL.revokeObjectURL(url)，否则内存持续增长 - 服务端需支持 CORS：
Access-Control-Allow-Origin: *（或精确域名），大文件还需考虑超时和内存压力
简单封装示例：
async function downloadFromUrl(url, filename) {
try {
const res = await fetch(url);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const blob = await res.blob();
const blobUrl = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = blobUrl;
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(blobUrl);
} catch (err) {
console.error('下载失败:', err);
}
}
服务端 Content-Disposition 更可靠，尤其对大文件
如果资源由你自己的后端提供，优先让服务端返回 Content-Disposition: attachment; filename="xxx.ext" 响应头。这样无论链接是否跨域、是否用 <a></a> 标签，浏览器都会强制弹出保存对话框。
注意条件：
- 响应头必须真实存在且拼写准确，
attachment不能写成download - 若前端通过
fetch获取该资源并想读取Content-Disposition（比如提取原始文件名），需服务端额外暴露：Access-Control-Expose-Headers: Content-Disposition - 避免使用中文文件名直传，Safari 和旧版 Chrome 对 RFC 5987 编码支持不稳定，建议服务端用 ASCII 名（如
report_20260813.pdf） -
Content-Type不宜设为text/html等可渲染类型，否则某些浏览器仍可能优先展示而非下载
iOS Safari 是个例外，得降级处理
iOS Safari 完全不支持脚本触发的 <a>.click()</a> 下载（包括 Blob 方案），哪怕 URL 同源也不行。用户只能长按链接手动“下载文件”或跳转后由系统处理。
可行应对方式：
- 检测
navigator.userAgent.includes('iPhone') || navigator.userAgent.includes('iPad')，对 iOS 用户隐藏“一键下载”按钮，改为提示“请长按链接选择【下载文件】” - 若后端能配合，直接提供带
Content-Disposition的直链，并确保该链接在 iOS Safari 中可访问（比如不依赖 JS 触发） - 避免在 iframe 或 sandbox 环境中尝试 Blob 下载，iOS 会直接报
Not allowed to navigate top frame to data URL
真正麻烦的从来不是跨域本身，而是把“下载”这件事当成纯前端可控行为——它实际横跨了协议限制、服务端配置、客户端兼容性三层，漏掉任何一层都可能白忙活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
