上传文件至AWS S3触发Uncaught (in promise) Failed to fetch报错排查

你遇到的报错不是单一原因导致，按影响优先级排序：

• 本地启动的Mock Service Worker默认拦截了全局fetch请求，你日志第一行的mockServiceWorker.js:130 Uncaught (in promise) TypeError: Failed to fetch就是MSW拦截S3请求后未正确透传导致的
• 你使用的S3请求路径是旧版格式s3-us-west-1.amazonaws.com，2020年后创建的S3桶已弃用该路径格式，请求会直接返回400 Bad Request
• 当前CORS配置未暴露S3返回的错误相关响应头，浏览器出于跨域安全规则拦截了错误响应详情，前端只能拿到通用的跨域类型响应，无法看到具体错误信息，才会出现你捕获到的通用"access denied"提示
• 你使用的react-aws-s3库已停止维护多年，默认配置的签名版本、路径拼接逻辑存在已知缺陷，未显式传全配置参数时必然触发请求错误

• 先配置MSW绕过S3域名请求
  在你的MSW请求处理规则中加入S3域名的透传逻辑，避免mock逻辑拦截上传请求：

  // 加入MSW handler列表
  rest.all(/.*s3.*\.amazonaws\.com.*/, (req) => req.passthrough())
  

• 更新S3桶CORS配置
  替换原有CORS规则，补上缺失的响应头暴露规则和缓存配置，确保浏览器可以正常读取S3返回的响应（包括错误响应）：

  [
      {
          "AllowedHeaders": ["*"],
          "AllowedMethods": ["PUT", "POST", "GET", "HEAD", "DELETE"],
          "AllowedOrigins": ["http://localhost:3000"],
          "ExposeHeaders": ["ETag", "x-amz-request-id", "x-amz-id-2"],
          "MaxAgeSeconds": 3000
      }
  ]
  

• 修正S3客户端初始化配置
  显式传全所有配置参数，不要依赖库的默认值，尤其注意S3访问路径要使用新版格式：

  const config = {
    bucketName: "你的脱敏存储桶名称",
    region: "us-west-1",
    accessKeyId: "你的访问密钥ID",
    secretAccessKey: "你的访问密钥",
    // 注意路径格式：s3.<region>.amazonaws.com，不要用旧版s3-<region>格式
    s3Url: "https://name-of-bucket.s3.us-west-1.amazonaws.com",
    dirName: "post-assets" // 可选，指定桶内存储文件的前缀目录
  }
  const ReactS3Client = new S3(config)
  

  注意：不要将永久AK/SK硬编码在前端代码中，生产环境必须使用STS颁发的临时凭证做上传，否则会存在严重的密钥泄露风险。

• 验证修复效果
  清空浏览器缓存、重启本地开发服务后重新触发上传：
  • 正常场景下上传成功会返回204状态码，匹配你现有代码的成功判断逻辑
  • 如果仍有报错，打开浏览器开发者工具-网络面板，找到对应S3请求查看响应体，即可拿到具体的错误原因（常见为签名不匹配、桶策略未开放对应写入权限、文件大小超出限制等）

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