download属性在跨域图片上必然失效，是浏览器强制安全策略；必须通过fetch+Blob创建同源blob URL或后端设置Content-Disposition响应头来实现下载，iOS Safari需服务端生成带签名的下载链接。
download 属性在跨域图片上必然失效，不是 bug，是浏览器强制安全策略；想让它生效，必须绕过“跨域下载”这个环节，而不是修 download 本身。
为什么跨域图片的 download 属性一定不生效
浏览器只允许 download 对同源 URL 生效（协议 + 域名 + 端口三者完全一致）。哪怕图片托管在 https://cdn.example.com/logo.png，而页面在 https://app.example.com，也属于跨域——download 被静默忽略，点击后直接预览图片。
常见误判现象：
- 本地双击 HTML 文件（
file://协议）打开，download全部失效，连同源图片都不行 - 开发环境 localhost:3000 加载 cdn.xxx.com 的图片，
download不起作用 - 右键链接 → “另存为”弹窗没出现，说明
download已被浏览器跳过
用 fetch + Blob 下载跨域图片（推荐方案）
核心思路：把图片内容拉到当前页面内存里，再用 URL.createObjectURL 创建一个“同源”的临时 blob URL，此时 download 就能正常工作。
立即学习“前端免费学习笔记（深入）”；
注意点：
- 目标图片响应头需包含
Access-Control-Allow-Origin: *或明确允许你的域名，否则fetch直接失败（CORS 报错） - 不要用
img.src加载后再 canvas 绘制——这会触发二次跨域，且对 WebP/HEIC 等格式支持差 - 大图（>5MB）可能触发内存警告，建议加 loading 提示和失败兜底
简易实现：
function downloadImage(url, filename) {
fetch(url)
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.blob();
})
.then(blob => {
const blobUrl = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = blobUrl;
a.download = filename || 'image';
document.body.appendChild(a);
a.click();
URL.revokeObjectURL(blobUrl); // 及时释放
document.body.removeChild(a);
})
.catch(err => console.error('下载失败:', err));
}
后端配合：加 Content-Disposition 响应头（最轻量）
如果图片由你控制的服务提供（比如自己的 CDN 或 API 接口），让后端在响应头中加上：
Content-Disposition: attachment; filename="logo.png"
此时前端可直接用 <a href="https://cdn.example.com/logo.png" download>，无需 JS，兼容 IE11+，且不依赖 CORS。
但注意：
- 该方案要求后端能动态设置响应头，静态托管（如 OSS、S3）需配置对象元数据或使用签名 URL
- 若图片路径是重定向链（如 302 到另一个域名），
Content-Disposition必须出现在最终响应里 - 部分 CDN（如 Cloudflare）默认不透传该头，需显式开启
iOS Safari 用户必须单独处理
download 属性在所有 iOS Safari 版本中完全无效；更麻烦的是，它还禁止通过 a.click() 触发下载——即使你用了 fetch + Blob，调用 click() 也不会弹保存框。
目前唯一可靠方式：
- 服务端生成带签名的一次性下载链接（如
/download?token=xxx），并确保该链接返回Content-Disposition头 - 前端跳转而非模拟点击：
window.location.href = signedUrl - 放弃 iOS 上的文件名自定义，由后端决定
filename值
别指望 canvas 或 base64 方案在 iOS 上绕过限制——它们同样触发不了系统保存对话框。
