download属性跨域失效的根本原因是浏览器安全策略强制禁止，非bug；同源时无效需检查Content-Type、Content-Disposition响应头及download值合法性；跨域重命名唯一前端方案是fetch+Blob，但大文件不稳妥；最终可靠方式仍依赖后端Content-Disposition响应头。
download 属性在跨域时被忽略，根本原因是什么
浏览器明确禁止对跨域资源使用 download 属性——这不是 bug，是安全策略强制行为。只要 href 的协议、域名或端口与当前页面不完全一致（比如 <a href="https://www.php.cn/link/e75a2d435455f0626ccf0af67216e76f">https://www.php.cn/link/e75a2d435455f0626ccf0af67216e76f</a> 页面里引用 <a href="https://www.php.cn/link/9946800209f33bce8ba0dd67bf724ce5">https://www.php.cn/link/9946800209f33bce8ba0dd67bf724ce5</a>），Chrome/Edge 会静默丢弃 download 值，Firefox 直接不触发下载，Safari 则可能弹窗拦截或拒绝 Blob/data URL。
常见误判场景包括：
- 开发时用
file://协议打开 HTML，download全无效 - 主站是
https://，但文件链接是http://（协议不同即跨域） - 同域名但端口不同（
localhost:3000→localhost:8000） - 二级域名差异（
app.example.com→api.example.com）
同源情况下 download 仍没生效？检查这三件事
即使确认同源，download 也可能“看起来没用”，原因往往不在属性本身：
-
Content-Type响应头是text/html或application/json：浏览器优先渲染，不会下载。必须设为可下载类型（如application/pdf、text/csv） -
Content-Disposition响应头缺失或值不是attachment：比如后端返回inline; filename="report.pdf"，浏览器就直接打开 PDF -
download值含非法字符：Firefox 对文件名更严格，download="report:final.xlsx"中的冒号会被过滤，最终可能保存为reportfinal.xlsx或退化成原始名；空值download=""、带路径download="/data/2024.csv"都无效
跨域下载且要精确重命名，只能靠 fetch + Blob
这是目前唯一不依赖后端改响应头、纯前端可控的方案，但要注意适用边界：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须用
fetch(url, { mode: 'cors' })，且服务端需允许跨域（Access-Control-Allow-Origin: *或具体域名） - 小文件（<50MB）较稳妥；大文件易触发内存警告或卡顿，用户点击后长时间无反馈
- 下载完成后必须调用
window.URL.revokeObjectURL()，否则 blob URL 持久驻留内存
示例关键逻辑：
function downloadFromUrl(url, filename) {
fetch(url)
.then(r => {
if (!r.ok) throw new Error(`HTTP ${r.status}`);
return r.blob();
})
.then(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); // 关键：立即释放
});
}真正可靠的重命名，永远取决于后端的 Content-Disposition
前端所有方案都是“绕过限制”，而服务端设置 Content-Disposition: attachment; filename="xxx.pdf" 才是浏览器下载行为的最终决定者。它不受跨域影响，无论链接来自哪里，只要响应头存在且合法，浏览器就会按指定名称保存。
注意两个实操细节：
- 文件名含中文时，建议用 RFC 5987 格式编码（如
filename*=UTF-8''%E7%94%A8%E6%88%B7%E6%8A%A5%E5%91%8A.pdf），避免 Safari/Firefox 解析失败 - 如果后端用 Express，别漏掉
res.setHeader('Content-Type', 'application/octet-stream')，否则某些 MIME 类型（如text/plain）仍可能被当作文本打开
跨域 + 精确重命名 + 大文件支持，三者无法同时由前端保证。该交还给后端的，别硬扛。
