使用S3预签名URL上传对象时出现歧义CORS错误如何解决

问题根因 #

你遇到的type: "cors"但预检请求200的403错误，本质不是CORS配置问题：S3验证签名失败返回403响应时，默认不会携带CORS头，浏览器才会把这个响应标记为CORS类型错误，核心原因是预签名参数和实际上传参数不匹配导致签名验证失败。

具体修复步骤 #

• 第一步：不要在生成预签名URL时使用image/*通配符作为ContentType。预签名机制要求生成签名时指定的ContentType，必须和实际上传请求的ContentType完全一致，而你上传的文件是有具体MIME类型的（比如image/png/image/jpeg），和通配符匹配不上就会触发签名校验失败。
  调整后端逻辑，先由前端拿到待上传文件的真实MIME类型传给后端，后端用这个真实值生成预签名URL：

  // Express端，从前端请求中获取文件的真实ContentType
  const { fileContentType, fileKey } = req.body;
  const presignedUrl = s3.getSignedUrl('putObject', {
      Bucket: `bucket`,
      Key: fileKey,
      ContentType: fileContentType
  });
  

• 第二步：前端上传时直接使用文件本身的MIME类型作为请求头，不要硬写image/*，保证和生成预签名URL时的ContentType完全一致：

  // React端，file为用户选择的上传文件对象
  const myHeaders = new Headers({ 'Content-Type': file.type });
  const res = await fetch(url, {
      method: 'PUT',
      headers: myHeaders,
      body: file 
  });
  

• 第三步：额外校验生成预签名URL的IAM身份权限，确认该身份有对应存储桶、对应Key前缀的s3:PutObject权限，避免权限不足导致的403错误。

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