Amazon S3预签名URL无法在img标签中显示的问题

我做了一个上传图片到S3的表单，想在上传完成后给用户展示图片。上传完成后，我用下面的代码获取预签名URL：

export const getUrlFromPath = async (filePath) => {
  filePath = splitUrl(filePath);
  const bucketPath = `${process.env.S3_UPLOAD_BUCKET}`;
  const s3Params = {
    Bucket: bucketPath,
    Key: filePath,
  };
  const command = new GetObjectCommand(s3Params);
  try {
    const signed = await getSignedUrl(s3Client, command, { expiresIn: 30 });
    return signed;
  } catch (e) {
    console.log(e);
  }
  return null;
};

我把这个URL放到img标签里，但是图片显示不出来。已经确认图片确实上传成功了，URL也是有效的——直接在浏览器地址栏打开能正常显示图片，而且img标签里也填对了URL。

用Pug渲染的图片标签代码：

.col-md-4
    #file-preview-wrapper.big-bordered-wrapper.d-none
      p
        | Document Preview
        a#remove-file.text-danger.float-end(href="#") Remove
      img.d-none.full-width(src="" id="img-preview")
      embed.d-none.full-width(src="" id="pdf-preview" height="400" type="application/pdf")

API调用完成后，用预签名URL更新页面的JS代码：

const previewUrl = (url) => {
    pdfPreview.src = "";
    imgPreview.src = "";
    previewWrapper.classList.add("d-none");
    if (url === "") {
      return;
    }

    previewWrapper.classList.remove("d-none");

    if (url.match(/pdf/)) {
      pdfPreview.src = url;
      pdfPreview.classList.remove("d-none");
    } else {
      imgPreview.src = url;
      imgPreview.classList.remove("d-none");
    }

    formSubmit.disabled = false;
  };

可能的问题及解决办法 #

1. 预签名URL有效期过短 #

你的预签名URL设置了expiresIn: 30，仅30秒就过期。如果API调用加DOM更新的耗时超过30秒，等到img标签加载时URL已经失效。可以延长有效期，比如改成1小时：

const signed = await getSignedUrl(s3Client, command, { expiresIn: 3600 });

2. S3桶CORS配置限制 #

即使URL直接访问有效，img标签加载可能触发浏览器CORS检查。需要确保S3桶的CORS规则允许你的网站域名访问，示例配置：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>https://你的网站域名</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

开发环境可临时用<AllowedOrigin>*</AllowedOrigin>测试，生产环境必须指定具体域名。

3. 文件类型判断逻辑有误 #

url.match(/pdf/)可能误判带"pdf"字符串的图片URL（比如文件名包含该字段），导致错误切换到PDF预览。建议改用更精准的扩展名判断：

const ext = url.split('.').pop().toLowerCase();
if (ext === 'pdf') {
  pdfPreview.src = url;
  pdfPreview.classList.remove("d-none");
} else {
  imgPreview.src = url;
  imgPreview.classList.remove("d-none");
}

4. DOM元素获取失败 #

确认imgPreview、previewWrapper等变量是否正确获取了DOM元素，可在函数开头加日志排查：

console.log('imgPreview元素:', imgPreview);
console.log('previewWrapper元素:', previewWrapper);

如果输出undefined，说明元素获取失败，可能是DOM未加载完成就执行了函数，或者选择器错误。

5. 浏览器缓存影响 #

浏览器可能缓存旧的无效URL，可通过添加随机参数强制刷新：

imgPreview.src = url + '?t=' + new Date().getTime();

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