如何通过预签名URL从AWS S3存储桶获取数据（JS）

以下是几个排查方向和解决方案，你可以逐一验证：

1. 检查S3桶的CORS配置 #

浏览器的跨域政策会拦截前端对S3的请求，除非桶配置了正确的CORS规则。你需要在S3控制台的「权限」-「跨域资源共享(CORS)」中添加规则，示例配置如下：

<CORSConfiguration>
  <CORSRule>
    <!-- 开发环境可临时用*，生产环境替换为你的前端域名 -->
    <AllowedOrigin>https://your-frontend-domain.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <!-- 允许所有请求头，或者根据需求指定 -->
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

保存配置后，等待几分钟生效再测试。

2. 验证预签名URL的有效性 #

• 确认生成URL时的Bucket和Key完全正确，S3的桶名和对象键区分大小写，别出现拼写错误
• 检查生成URL所用的AWS凭证（Access Key和Secret Key）是否拥有s3:GetObject权限，可通过IAM策略验证
• 确认URL未过期，你设置的Expires是43200秒（12小时），如果生成时间超过12小时，URL会失效，需要重新生成

3. 修正XMLHttpRequest的请求逻辑 #

你的现有代码缺少错误处理，且如果请求的是二进制文件（如图片、视频），用responseText会导致乱码。建议修改为：

let request = new XMLHttpRequest();
request.open("GET", presignedUrl, true);

// 如果请求的是二进制数据，设置响应类型为blob
request.responseType = 'blob';

request.onload = () => {
  // 先检查状态码是否成功
  if (request.status >= 200 && request.status < 300) {
    console.log('请求成功:', request.response);
    // 如果是文本文件，可转成文本：console.log(await request.response.text())
  } else {
    console.error('请求失败，状态码:', request.status);
    console.error('错误信息:', request.responseText);
  }
};

// 添加错误监听，捕获网络层面的错误
request.onerror = () => {
  console.error('请求发生网络错误');
};

request.send();

4. 检查AWS SDK版本和签名算法 #

如果你使用的是旧版AWS SDK（v2），可能存在签名兼容性问题。推荐升级到AWS SDK for JavaScript v3，生成预签名URL的代码示例：

import { GetObjectCommand, S3Client } from "@aws-sdk/client-s3";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";

// 初始化S3客户端，替换为你的区域
const s3Client = new S3Client({ region: 'us-east-1' });

const getObjectCommand = new GetObjectCommand({
  Bucket: 'BUCKETNAME',
  Key: 'KEY'
});

// 生成有效期12小时的预签名URL
const presignedUrl = await getSignedUrl(s3Client, getObjectCommand, { expiresIn: 43200 });

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