如何用JavaScript在下载前为无扩展名视频添加.mp4后缀

问题场景 #

我有一个托管的视频文件，地址为 https://cdn.shopify.com/s/files/1/0664/3037/0044/files/video，该文件无扩展名。尝试用以下JavaScript代码实现下载时命名为video.mp4，但下载的文件仍无扩展名：

function downloadURI(uri, name) {
  var link = document.createElement("a");
  link.download = name;
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  delete link;
}

downloadURI("https://cdn.shopify.com/s/files/1/0664/3037/0044/files/video", "video.mp4");

问题原因 #

1. 跨域安全限制：如果网页域名与Shopify CDN域名不同，浏览器会忽略<a>标签的download属性设置，这是同源策略的安全限制。
2. 服务器响应头优先级：若服务器返回的Content-Disposition响应头指定了文件名，浏览器会优先使用该名称，而非前端设置的download值。

解决方案 #

方案1：通过Fetch API转换为Blob后下载 #

先将跨域文件拉取为Blob对象，再生成本地Blob URL进行下载，此时download属性可正常生效：

async function downloadFile(url, filename) {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error('文件请求失败');
    const blob = await response.blob();
    const blobUrl = URL.createObjectURL(blob);
    
    const link = document.createElement('a');
    link.href = blobUrl;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    
    // 清理临时资源
    document.body.removeChild(link);
    URL.revokeObjectURL(blobUrl);
  } catch (err) {
    console.error('下载出错:', err);
  }
}

// 调用下载
downloadFile('https://cdn.shopify.com/s/files/1/0664/3037/0044/files/video', 'video.mp4');

注意：此方法需要目标服务器配置了CORS允许跨域请求，否则会触发跨域错误。

方案2：修改服务器响应头（需服务器权限） #

如果有权限控制文件的服务器配置，可添加以下响应头：

• Content-Disposition: attachment; filename="video.mp4"：强制浏览器以下载方式处理文件，并指定文件名
• Content-Type: video/mp4：明确文件类型为MP4视频

配置后，浏览器会直接使用响应头指定的文件名，无需前端额外处理。

内容的提问来源于stack exchange，提问作者Ganesh Adhikari