跨域环境下点击<a>标签下载文件时如何实现重命名？

AI 小北

2026-8-8

跨域文件下载重命名的可行方案

针对跨域场景下无法通过<a>标签的download属性重命名文件的问题，2022年有几种简便且符合现代浏览器规范的实现方式：

方案1：后端代理转发（推荐）

在你的主站（www.example.com）搭建一个简单的后端接口，用户点击下载链接时请求该接口，由后端从storage.example.com获取文件后，在响应头中设置：

Content-Disposition: attachment; filename="目标文件名.zip"

同时返回文件内容。这种方式完全不受跨域限制，还能通过后端做鉴权、限流等安全处理，适配小型文件场景。

方案2：前端先下载再生成重命名链接

由于你的文件仅约30kB，可通过前端实现：

用fetch请求存储桶中的文件（需提前配置存储桶的CORS规则，允许www.example.com的跨域请求）；
将响应转为Blob对象；
创建临时<a>标签，设置href为URL.createObjectURL(blob)，并指定download为易识别的文件名；
触发标签点击完成下载，最后释放URL对象避免内存泄漏。

示例代码：

async function downloadAndRename(hashFilename, targetName) {
  try {
    const res = await fetch(`https://storage.example.com/${hashFilename}`);
    const blob = await res.blob();
    const tempUrl = URL.createObjectURL(blob);

    const link = document.createElement('a');
    link.href = tempUrl;
    link.download = targetName;
    document.body.appendChild(link);
    link.click();

    document.body.removeChild(link);
    URL.revokeObjectURL(tempUrl);
  } catch (err) {
    console.error('下载失败:', err);
  }
}

调用时只需执行downloadAndRename('哈希文件名.zip', '我的文件.zip')即可。