download属性在跨域链接下完全失效，因浏览器基于安全策略硬性禁止——只要协议、域名或端口不同源，chrome/edge静默忽略，firefox不支持，safari仅限同源blob或data url。
download 属性在跨域链接下为什么完全失效
浏览器明确禁止 download 属性对跨域资源生效——这不是兼容性问题，而是安全策略硬限制。只要 href 的协议、域名或端口与当前页面不一致（比如 https://example.com 页面里写 href="https://cdn.example.net/file.pdf"），Chrome/Edge 会静默忽略 download，Firefox 直接不支持，Safari 仅对同源 Blob 或 data URL 有限支持。此时点击链接，大概率是跳转、预览 PDF 或打开图片，而不是下载。
同源前提下仍重命名失败的常见坑
即使 URL 同源，download 也不一定按你预期工作：
-
download值不含后缀（如download="report"）时，Firefox 可能拒绝下载或回退到原始文件名；必须显式写download="report.pdf" - 值中含非法字符（如
:、/、\）会被浏览器自动过滤，导致最终文件名为空或截断 - 服务端返回的
Content-Type是text/html或application/json，浏览器优先渲染而非下载，download形同虚设 - 本地双击 HTML 文件用
file://协议打开，所有download都无效——必须起http://localhost服务
真正能跨域重命名的两种可靠方案
前端无法绕过同源限制，但可以换路径实现目标：
-
后端加
Content-Disposition响应头：最干净。请求发到自己域名（如/api/download?id=123），后端代理获取远程文件，并设置res.setHeader('Content-Disposition', 'attachment; filename="invoice-2024.pdf"')。浏览器不管资源从哪来，只认这个响应头 -
前端 fetch + Blob +
URL.createObjectURL：适合无法改后端的场景。用fetch(url, { mode: 'cors' })拉取二进制数据（需服务端允许 CORS），转成Blob，再创建临时a标签并设置download。注意：大文件会吃内存，且revokeObjectURL必须调用，否则内存泄漏
别踩的兼容性雷区
很多“兼容写法”实际是自欺欺人：
- 给跨域
a标签加download还是写target="_blank"—— Safari 和 Firefox 根本不触发下载，只是新开页 - 用
data:URL 包裹跨域内容 —— Safari 拒绝下载，Chrome 行为不稳定，且 base64 编码膨胀体积 - 依赖
navigator.msSaveBlob（IE 专用）——现代 Edge 已移除，其他浏览器从未支持 - 没处理
fetch的 4xx/5xx 状态码，或没 catch 网络错误，导致用户点不动、无反馈
跨域重命名的本质不是“让 download 生效”，而是放弃直接链接，改走可控的数据流路径。要么后端扛，要么前端拿 blob 接，没有第三条路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
