我之前也踩过这个坑！你的这段代码在旧版Chrome里能正常触发文件下载，但新版本直接跳转到S3的文件页面，核心原因是Chrome对跨域资源的下载行为做了更严格的安全限制，尤其是针对AWS S3这类第三方存储的资源。

问题根源 #

旧版Chrome会忽略跨域资源的响应头配置，直接遵循download属性的指令触发下载；但新版本Chrome要求：如果是跨域资源，服务器必须返回Content-Disposition: attachment的响应头，否则会直接打开资源，而不是触发下载。你的S3链接显然没有配置这个响应头，所以浏览器直接跳转了。

两种解决方案 #

方案1：修改S3对象的响应头（推荐）

这是最稳妥的方式，直接让S3告诉浏览器“这是一个需要下载的文件”：

• 如果是通过AWS控制台操作：找到对应的S3对象，进入「属性」→「元数据」，添加键值对：
  • 键：Content-Disposition
  • 值：attachment; filename="filename.txt"
• 如果是通过SDK上传文件，在上传参数里指定这个响应头（比如AWS JS SDK的ContentDisposition参数）。

配置完成后，你原来的代码就能正常工作了，不需要修改前端逻辑。

方案2：前端通过Blob中转下载（适合无法修改S3配置的场景）

如果没法修改S3的配置，可以先把文件内容拉取到前端，转换成Blob对象再触发下载：

// 拉取S3文件内容
fetch('https://s3-us-east-1.amazonaws.com/XXX/XXX/XXX?Signature=XXX&Expires=XXX&AWSAccessKeyId=XXX')
  .then(response => {
    // 确保请求成功
    if (!response.ok) throw new Error('请求失败');
    return response.text();
  })
  .then(fileContent => {
    // 创建Blob对象
    const blob = new Blob([fileContent], { type: 'text/plain' });
    const blobUrl = URL.createObjectURL(blob);
    
    // 创建a标签触发下载
    const downloadLink = document.createElement('a');
    downloadLink.href = blobUrl;
    downloadLink.download = 'filename.txt';
    document.body.appendChild(downloadLink);
    downloadLink.click();
    
    // 清理资源，避免内存泄漏
    document.body.removeChild(downloadLink);
    URL.revokeObjectURL(blobUrl);
  })
  .catch(error => {
    console.error('下载出错:', error);
    alert('文件下载失败，请稍后重试');
  });

⚠️ 注意：这种方法需要你的S3桶配置了正确的CORS规则，允许你的网站域名发起GET请求，否则会出现跨域错误。

内容的提问来源于stack exchange，提问作者Tony V.