download属性在跨域链接上无效是同源策略强制限制，点击退化为普通导航；可靠方案是fetch+blob生成同源url，ios需服务端content-disposition响应头或反向代理。
download 属性为什么在跨域链接上完全没反应
浏览器明确禁止 download 属性对跨域 URL 生效——这不是 bug，是同源策略的强制执行。只要 href 的协议、域名、端口与当前页面任一不同（比如 https://a.com 页面里写 href="https://cdn.a.com/file.pdf"），download 就会被静默忽略，点击后行为退化为普通导航（打开 PDF）或新标签页加载。
常见误判点：
- 本地用
file://打开 HTML 时看似能用，上线 HTTP(S) 后立刻失效 -
localhost和127.0.0.1被视为不同源，开发调试时容易踩坑 - 控制台通常不报错，但右键链接 → “另存为”若弹不出对话框，基本可确认被忽略
fetch + Blob 是目前最可靠的跨域下载方案
核心思路是绕过“跨域资源不能被 download 控制”的限制：把文件内容先拉到前端内存，转成 Blob，再用 URL.createObjectURL() 生成一个同源的临时 URL，此时 download 属性才真正生效。
实操要点：
- 必须用
response.blob()，不是response.text()，否则二进制文件（如 Excel、PDF）会损坏 - 服务端需允许 CORS，至少返回
Access-Control-Allow-Origin: *或指定域名 - 如果服务端在
Content-Disposition响应头里写了文件名，可用res.headers.get('content-disposition')提取，比硬编码更健壮 -
URL.createObjectURL()创建后必须配对调用URL.revokeObjectURL(url)，否则内存泄漏
示例关键片段：
fetch('/api/export?format=csv')
.then(res => {
const filename = res.headers.get('content-disposition')?.match(/filename[^;=\n]*=(?:'[^']*'|"([^"]*)"|[^;\n]*)/)?.[1] || 'export.csv';
return res.blob().then(blob => ({ blob, filename }));
})
.then(({ blob, filename }) => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
});
iOS Safari 对 download 属性和脚本触发下载都有限制
download 属性在 iOS Safari 全系（包括最新版）中完全不支持；更麻烦的是，它还**不支持通过 JavaScript 模拟 click() 触发下载**——哪怕你用 fetch + Blob 构造了合法的 a 元素，调用 .click() 也不会弹出保存对话框。
可行应对方式：
- 服务端必须配合：对导出接口设置
Content-Disposition: attachment; filename="xxx"响应头，这是 iOS 唯一可靠路径 - 前端检测
/(iPhone|iPad|iPod)/i.test(navigator.userAgent)，如果是 iOS，就隐藏下载按钮，改为提示“请长按链接 → 选择‘下载链接’” - 避免在 iOS 上尝试 Blob + click 组合，它不会失败，但也不会有任何效果
静态资源尽量放同源路径下，别依赖 CDN 直链 + download
如果只是下载 PDF、ZIP 这类静态文件，最省事、兼容性最好的方式是：把它们放在当前域名下，比如 /assets/manual.pdf 或 /downloads/report.zip。这样 @#@#@#@#@#@#@#@#@#@0 就能直接工作，无需 JS、无跨域风险、全平台支持。
如果必须用 CDN（如阿里云 OSS、Cloudflare R2）：
- 配置反向代理，比如 Nginx 把
/cdn/xxx.pdf代理到https://cdn.example.com/xxx.pdf，保持同源 - 或加一层轻量服务端路由，如
/api/proxy?u=https%3A%2F%2Fcdn.example.com%2Ffile.zip，由后端转发并注入Content-Disposition - 不要在前端拼接跨域 URL 然后硬加
download，它永远不生效
真正需要动态处理的，只有 API 返回流式二进制内容的场景；其余情况，同源静态路径 + download 是最干净的选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
