Wix平台使用S3预签名POST URL上传文件失败求助

问题背景 #

在Wix平台通过AWS S3无条件预签名POST URL上传图片时，JS请求返回成功，但S3中仅生成15B的文本文件（预期为完整图片）。尝试添加Content-Type作为请求头或FormData字段时，触发Bad Request或Forbidden错误。本地Python上传逻辑可正常运行。

上传代码 #

async function uploadFile(file) {
    let presignedData = await fetchPresignedData()
    console.log(presignedData)
    let formData = new FormData();
    
    Object.entries(presignedData.fields).forEach(([key, value]) => {
        formData.append(key, value);
    });
    formData.append('file', file); // file是包含name、size等属性的File对象

    formData.forEach((value, key) => {
        console.log(`${key}: ${value}`);
    });

    // 执行文件上传
    await fetch(presignedData.url, {
            method: 'POST',
            body: formData,
    })
};

解决方案 #

• 严格匹配预签名的Content-Type规则
  预签名POST的fields如果包含Content-Type字段，必须和上传文件的实际类型完全一致，禁止手动修改或添加额外的Content-Type。如果预签名生成时未指定Content-Type，不要在FormData或请求头中添加该字段。

• 修正FormData文件追加逻辑
  确保文件以二进制形式追加到FormData，可显式指定文件名（避免Wix平台自动转换格式）：

  // 仅当预签名允许时，才添加第三个参数指定文件名
  formData.append('file', file, file.name);
  

• 规避Wix的请求自动处理
  Wix可能会修改fetch请求的默认行为，添加以下配置避免干扰：

  await fetch(presignedData.url, {
      method: 'POST',
      body: formData,
      credentials: 'omit', // 禁止传递不必要的凭证
      headers: {} // 清空自定义头，让浏览器自动生成multipart/form-data边界
  });
  

• 对比Python与JS的请求差异
  用Chrome DevTools抓包对比两者的请求细节：

  • 检查请求头中Content-Type的边界值是否正常
  • 查看请求体中文件部分是否为二进制传输
    重点确认Python请求中Content-Disposition的格式，确保JS请求与之对齐。

• 检查预签名的权限与条件
  确认预签名POST的生成逻辑未添加隐藏限制（如文件大小、Content-Type白名单），JS上传必须严格符合这些条件，否则S3可能返回200但仅写入错误提示文本（即你看到的15B文件）。

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