download属性在跨域时被浏览器静默忽略，必须通过fetch获取资源、URL.createObjectURL生成blob URL并触发下载，且需服务端正确配置CORS。
download 属性本身不解决跨域资源导出问题，它在跨域场景下会被浏览器静默忽略——这是关键前提，别指望加个 download 就能直接下载远程图片或 PDF。
为什么 download 在跨域时失效
浏览器出于安全限制，只有同源 URL（或 blob:、data: 协议）才能触发 download 属性生效。当你给一个 <a href="https://api.example.com/report.pdf" download="report.pdf"> 加上 download，Chrome/Firefox/Safari 都会忽略该属性，退化为普通跳转或新标签页打开。
- 控制台通常不会报错，但 Network 面板能看到请求发出，而点击后文件没下载——这是最典型的失效表现
- 即使服务器返回了
Content-Disposition: attachment，download属性依然不生效，二者机制无关 -
fetch+URL.createObjectURL(new Blob(...))是绕过限制的必经路径
用 fetch 获取跨域资源再触发下载
核心思路是：先通过 fetch 拉取资源（需服务端支持 CORS），再构造本地 Blob，最后用 URL.createObjectURL 生成可信任的 blob URL 绑定 download。
示例代码（注意处理响应类型和文件名）：
立即学习“前端免费学习笔记（深入）”；
async function downloadFromCrossOrigin(url, filename) {
try {
const res = await fetch(url, { mode: 'cors' }); // 必须显式声明 cors
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 || (res.headers.get('content-disposition')?.match(/filename[^;=\n]*=([^;]*)/)?.[1] ?? 'download');
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(blobUrl); // 及时释放，避免内存泄漏
} catch (err) {
console.error('Download failed:', err);
}
}
- 服务端必须返回
Access-Control-Allow-Origin（不能是*如果带 credentials） - 如果资源是二进制（如 Excel、PDF），确保
response.blob()而非response.text() - 不要复用同一个 blob URL 多次下载，每次都要
createObjectURL+revokeObjectURL
常见陷阱与兼容性注意点
看似简单，实际容易卡在几个细节上：
-
fetch默认不带 cookies，若接口需要鉴权，得加{ credentials: 'include' }，同时服务端Access-Control-Allow-Origin不能为* - Safari 对
blob:URL 的download支持较晚（iOS 15.4+ / macOS 12.3+），旧版本可能只打开预览不下载 - 大文件（>500MB）在内存中构造 Blob 可能触发 OOM，此时应引导用户跳转原链接，或服务端提供直传 token
- 某些 CDN 或代理会剥离
Content-Disposition头，手动提取文件名不可靠，建议服务端通过 JSON 接口返回明确的filename字段
跨域下载不是加个属性的事，而是要主动拉取、本地构造、可控释放的一整套流程。最容易被忽略的是服务端 CORS 配置的粒度，以及 Safari 的兼容边界——别等上线才发现 iOS 用户点不动。
