向AWS存储桶发起PUT请求出现CORS错误 预签名URL上传图片失败

核心问题及修复步骤 #

• 问题1：前端错误添加响应头到请求中
  Access-Control-Allow-Origin、Access-Control-Allow-Headers、Access-Control-Allow-Methods都是服务端返回的响应头，不属于前端请求需要携带的字段，额外添加这些头会导致预检请求校验失败，直接删除这些请求头即可。
• 问题2：Content-Type配置错误
  1. 手动设置Content-Type: multipart/form-data会缺失必填的boundary分隔符参数，导致文件解析失败，该头需要由浏览器自动生成，无需手动配置。
  2. 如果你生成预签名URL时指定了ContentType参数，实际上传请求的Content-Type必须和生成时完全一致，否则会被S3拦截。如果生成预签名URL时没有指定Content-Type，建议不要在上传请求中手动添加该头，让fetch自动适配文件的MIME类型即可。
• 问题3：CORS规则缺失预检请求方法
  浏览器跨域请求前会先发送OPTIONS方法的预检请求，你当前配置的AllowedMethods中没有包含OPTIONS，导致预检直接被S3拒绝，需要在AllowedMethods中添加OPTIONS方法。

修正后代码示例 #

前端上传代码 #

// preSignedUrl为你获取到的预签名地址
const res = await fetch(preSignedUrl, {
      method: "PUT",
      body: file
    })
 console.log(res)

修正后S3 CORS规则 #

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST",
            "OPTIONS"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag",
            "x-amz-meta-custom-header"
        ],
        "MaxAgeSeconds": 3000
    }
]

补充说明 #

修改S3 CORS规则后最长可能需要5分钟生效，测试前可以清除浏览器缓存，避免旧的预检请求缓存影响验证结果。

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