如何在新标签页打开S3预签名URL而不触发自动下载？

核心原因 #

默认生成的S3预签名URL对应的响应头中Content-Disposition取值为attachment，会强制触发浏览器下载行为；若文件上传时未正确设置Content-Type，浏览器无法识别文件类型也会默认执行下载操作。

调整步骤 #

1. 后端生成预签名URL时新增响应头参数 #

调用getSignedUrl时新增两个参数：

• ResponseContentDisposition：设为inline，告知浏览器直接在页面内展示内容，同时可指定文件名
• ResponseContentType：指定正确的文件MIME类型，确保浏览器能正确识别文件格式
  修改后的后端代码如下：

static async downloadFile(req, res, next) {
  // 可根据文件后缀动态生成对应ContentType，示例为通用逻辑
  function getContentType(fileName) {
    const ext = fileName.split('.').pop().toLowerCase()
    const mimeMap = {
      pdf: 'application/pdf',
      png: 'image/png',
      jpg: 'image/jpeg',
      jpeg: 'image/jpeg',
      gif: 'image/gif',
      txt: 'text/plain'
      // 按需补充其他文件格式对应的MIME类型
    }
    return mimeMap[ext] || 'application/octet-stream'
  }
  const contentType = getContentType(req.body.fileName)
  s3.getSignedUrl('getObject', {
    Bucket: process.env.BUCKET_NAME,
    Key: req.body.fileName,
    // 新增以下两个配置项
    ResponseContentDisposition: `inline; filename="${req.body.fileName}"`,
    ResponseContentType: contentType
  }, (error, url) => {
    if (error) {
      res.status(403).json({
        err: error
      })
    } else {
      res.status(200).json({
        url
      })
    }
  })
}

注：原代码错误返回了未定义的err变量，此处已修正为error。

2. 前端逻辑优化 #

异步回调中直接调用window.open大概率会被浏览器的弹窗拦截机制拦截，建议改为动态创建a标签触发点击的方式实现新标签页打开：

User.downloadFile(fileName) // HTTP request was made in another file using axios
  .then((res) => {
    const link = document.createElement('a')
    link.href = res.data.url
    link.target = '_blank'
    link.rel = 'noopener noreferrer'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  })

问题排查 #

如果调整后仍无法正常预览，可按以下顺序校验：

• 直接将生成的预签名URL粘贴到浏览器地址栏访问，确认是否能正常预览
• 打开浏览器开发者工具的网络面板，查看该请求的响应头：
  • 确认Content-Disposition取值为inline
  • 确认Content-Type与文件实际格式匹配
• 检查S3 Bucket的CORS配置，是否允许当前业务域名发起GET请求
• 确认S3 Bucket没有配置强制下载的Bucket Policy，若有则需要对应调整

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