私有AWS S3存储桶上传文件触发CORS错误该如何解决？

1. CORS报错修复 #

你遇到的跨域错误完全由S3存储桶的CORS规则缺失导致，和现有前后端代码逻辑无关，按以下步骤配置即可：

1. 登录AWS控制台，进入S3服务，打开atlasworld-progress存储桶的配置页
2. 切换到「权限」标签，下拉找到「跨源资源共享(CORS)」配置模块，替换为以下规则后保存：

[
    {
        "AllowedHeaders": ["*"],
        "AllowedMethods": ["PUT", "GET"],
        "AllowedOrigins": ["http://localhost:3000"],
        "ExposeHeaders": ["ETag"]
    }
]

注意：部署到生产环境时，请将AllowedOrigins的http://localhost:3000替换为你实际的前端线上域名，不要保留通配符*，避免安全风险。

另外补充一个常见的后续报错规避：你生成预签名URL时指定了ContentType参数，前端调用PUT接口时需要显式指定对应请求头，否则会出现签名不匹配的403错误，修改前端fetch代码如下：

fetch(res.data, {
  method: "PUT",
  body: frontPhoto,
  headers: {
    "Content-Type": frontPhoto.type
  }
})

2. 多文件上传说明 #

S3的putObject预签名URL单次仅支持上传一个文件，无法在单个fetch请求中上传多个不同文件。如果需要批量上传，推荐的实现方案是：后端批量生成对应每个文件的独立预签名URL，前端并发发起多个PUT请求分别上传对应文件即可。

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