React+Amplify架构下S3文件上传后10-20分钟访问报403 Forbidden

问题根源 #

你存储的是Amplify Storage.get()默认生成的临时签名URL，这类URL默认过期时间通常为15分钟左右，过期后就会返回403错误。

解决方案 #

1. 使用永久公共URL替代临时签名URL #

因为你的S3桶已经配置了PublicReadGetObject策略，public文件夹下的文件可以直接通过永久URL访问，无需签名。URL格式为：

https://<你的桶名称>.s3.<你的AWS区域>.amazonaws.com/public/<文件名>

2. 修改上传代码获取永久URL #

调整uploadImage函数，直接构造永久URL，或者通过Storage.get()指定永久有效参数：

async function uploadImage(
  uri?: File,
  filename?: string
): Promise<string | null> {
  if (!uri || !filename) return null;

  try {
    const result = await Storage.put(filename, uri, {
      level: "public",
      contentType: "image/*",
    });
    console.log("STORAGE PUT SUCCESS: ", result.key);
    
    // 方式1：直接构造永久公共URL
    const bucketName = "<你的S3桶名称>";
    const region = "<你的AWS区域，比如us-east-1>";
    const permanentUrl = `https://${bucketName}.s3.${region}.amazonaws.com/${result.key}`;
    
    // 方式2：通过Storage.get获取永久URL（部分Amplify版本支持）
    // const permanentUrl = await Storage.get(result.key, { expires: 0 });
    
    console.log("PERMANENT URL: ", permanentUrl);
    return permanentUrl;
  } catch (err) {
    console.log("STORAGE PUT ERROR: ", err);
    return null;
  }
}

3. 验证配置完整性 #

• 确认桶策略中的Resource路径正确，替换YOUR-BUCKET-NAME为实际桶名
• 检查S3桶的CORS配置，确保允许前端域名的GET请求，示例CORS配置：

[
  {
    "AllowedHeaders": ["*"],
    "AllowedMethods": ["GET"],
    "AllowedOrigins": ["<你的前端域名>"],
    "ExposeHeaders": []
  }
]

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