使用预签名URL上传至DigitalOcean Spaces遇CORS错误求助

使用DigitalOcean Spaces预签名URL上传文件时触发CORS错误，错误提示预飞行请求的响应缺少Access-Control-Allow-Origin头。已在后台配置允许http://localhost:3000的CORS规则，但问题依然存在。错误详情如下：

access to XMLHttpRequest at 'https://fra1.digitaloceanspaces.com/bucket-name/ShFv9RJ7Pz8DPcKVM2JHVU9fQRwCPM38CT41x2YIcz7XdE9ZwQwzZlNuwe4GSm4z-2023-09-13T13%3A54%3A00?AWSAccessKeyId=DO00GQXYKPRWC8FPZJ92&Content-Type=image%2Fpng&Expires=1694613540&Signature=lKpA7i8r5lJMZ3goTNu91OU%2Fd7g%3D&x-amz-acl=public-read' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
PUT https://fra1.digitaloceanspaces.com/bucket-name/ShFv9RJ7Pz8DPcKVM2JHVU9fQRwCPM38CT41x2YIcz7XdE9ZwQwzZlNuwe4GSm4z-2023-09-13T13%3A54%3A00?AWSAccessKeyId=DO00GQXYKPRWC8FPZJ92&Content-Type=image%2Fpng&Expires=1694613540&Signature=lKpA7i8r5lJMZ3goTNu91OU%2Fd7g%3D&x-amz-acl=public-read net::ERR_FAILED

• 补全CORS规则的方法和头配置
  预飞行请求（OPTIONS）需要明确允许对应操作的方法和请求头：

  • 允许的Methods必须包含OPTIONS和PUT
  • 允许的Headers要覆盖Content-Type、x-amz-acl以及上传时用到的其他头
  • 若请求带凭证，需添加Access-Control-Allow-Credentials: true

• 验证CORS规则的生效范围
  确认规则应用到了目标Bucket（注意区域匹配，比如你用的是fra1区域的桶），且Origin地址完全正确（是http://localhost:3000，不要多加斜杠或写错端口）。配置后可能需要等待1-2分钟生效。

• 检查预签名URL的生成参数
  确保生成预签名URL时指定的Content-Type和实际上传文件类型一致，x-amz-acl参数和CORS规则里允许的配置匹配。

• 用curl手动测试预飞行请求
  发送OPTIONS请求验证响应头，命令示例：

  curl -X OPTIONS -H "Origin: http://localhost:3000" -H "Access-Control-Request-Method: PUT" -H "Access-Control-Request-Headers: Content-Type,x-amz-acl" https://fra1.digitaloceanspaces.com/bucket-name/[你的对象键]
  

  查看响应是否包含Access-Control-Allow-Origin且值为http://localhost:3000，如果没有说明CORS配置未生效，需重新检查后台设置。

• 清除浏览器缓存
  浏览器可能缓存了旧的CORS响应，尝试用无痕模式测试或清空缓存后重试。

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