Flutter Web通过后端提供的链接上传文件至S3遇到问题求助

看起来你遇到的问题确实挺闹心的——Postman能正常上传，但Flutter Web里怎么调试都不行，还报XMLHttpRequest错误，我来帮你捋捋可能的原因和解决办法！

一、核心问题：请求格式不匹配（大概率是根源） #

你现在用MultipartRequest发送PUT请求，但S3的预签名PUT链接不需要用多部分表单上传！Postman里你应该是直接把文件原始字节作为请求体发送的对吧？而MultipartRequest会自动给请求加上multipart/form-data的Content-Type，这会覆盖你设置的image/png，完全不符合S3预期的请求格式，自然会失败。

改成直接用普通http.put试试，把文件字节直接作为请求体：

// 解析后端返回的上传链接
final uploadUrl = jsonDecode(response.body)["data"]["data"];
// 准备请求头
Map<String, String> customHeaders = {
  "x-amz-server-side-encryption-customer-key": "",
  "x-amz-server-side-encryption-customer-algorithm": "AES256",
  "x-amz-server-side-encryption-customer-key-MD5": "",
  "Content-Type": "image/png",
};

// 直接发送PUT请求，文件字节作为body
final uploadResponse = await http.put(
  Uri.parse(uploadUrl),
  headers: customHeaders,
  body: file.bytes,
);

print('上传状态码：${uploadResponse.statusCode}');
print('响应内容：${uploadResponse.body}');

这样的请求格式就和Postman完全一致了，S3能正确识别文件内容。

二、再排查CORS配置（浏览器环境的特殊限制） #

Postman是客户端工具，不受浏览器的CORS规则约束，但Flutter Web运行在浏览器里，必须遵守S3桶的CORS配置。你需要确认S3桶的CORS规则是否满足：

• 允许PUT方法
• 允许你的Flutter Web应用的Origin（比如开发环境的http://localhost:端口，生产环境的域名）
• 暴露必要的响应头（比如你用到的加密相关自定义头）

给你一个参考的S3 CORS配置示例（按需调整）：

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>http://localhost:5000</AllowedOrigin> <!-- 替换成你的开发端口 -->
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <ExposeHeader>x-amz-server-side-encryption-customer-key-MD5</ExposeHeader>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
  </CORSRule>
  <CORSRule>
    <AllowedOrigin>https://your-production-domain.com</AllowedOrigin> <!-- 生产环境域名 -->
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <ExposeHeader>x-amz-server-side-encryption-customer-key-MD5</ExposeHeader>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
  </CORSRule>
</CORSConfiguration>

三、其他细节检查 #

1. 文件完整性：确认file.bytes是否完整读取了文件内容，可以打印file.bytes!.length和本地文件大小对比一下。
2. 预签名链接有效性：检查后端返回的链接是否过期，签名是否正确（可以复制链接到浏览器试试能不能访问）。
3. 加密头值：你现在x-amz-server-side-encryption-customer-key是空的，Postman里是不是填了正确的密钥？如果后端要求这个字段有值，空值会导致S3拒绝请求。

备注：内容来源于stack exchange，提问作者iamuma