使用API通过PUT方法向S3上传文件时遭遇CORS错误求助

Postman能成功上传但浏览器触发CORS错误，核心原因是浏览器的同源策略限制，Postman不受此约束。以下是具体排查点和解决方法：

1. 检查API Gateway的CORS配置 #

API Gateway必须正确配置CORS规则，否则浏览器的预检OPTIONS请求会失败：

• 登录AWS控制台进入API Gateway，找到你的dev阶段对应的API资源。
• 选中资源后点击Actions > Enable CORS，配置以下参数：
  • Allowed Origins：填写你的网页域名（如http://localhost:8080，测试阶段可临时用*，生产环境务必指定具体域名）。
  • Allowed Headers：至少包含Content-Type，也可设为*覆盖所有头部。
  • Allowed Methods：必须勾选PUT和OPTIONS（预检请求默认用OPTIONS）。
• 配置完成后，点击Enable CORS and replace existing CORS headers，然后重新部署API到dev阶段（修改CORS后必须部署才会生效）。

2. 检查S3存储桶的CORS配置 #

如果API Gateway直接将请求转发到S3，S3的CORS规则也需要匹配：

• 进入S3控制台，找到目标存储桶，进入权限 > 跨域资源共享(CORS)。
• 替换为以下配置（测试用，生产环境替换AllowedOrigin为具体域名）：

  <CORSConfiguration>
    <CORSRule>
      <AllowedOrigin>*</AllowedOrigin>
      <AllowedMethod>PUT</AllowedMethod>
      <AllowedMethod>OPTIONS</AllowedMethod>
      <AllowedHeader>*</AllowedHeader>
    </CORSRule>
  </CORSConfiguration>
  

• 保存配置后等待1-2分钟生效。

3. 前端代码优化 #

你的现有代码可以做小调整，避免潜在问题：

• 无需手动设置Content-Type：直接上传file对象时，浏览器会自动根据文件类型填充正确的Content-Type，手动设置可能和实际文件类型冲突。
• 简化请求配置：redirect: 'follow'是默认值，可省略。
• 优化错误排查：在catch中打印完整错误信息，同时查看浏览器Network面板的OPTIONS请求响应头，确认Access-Control-Allow-Origin等字段是否符合预期。

修改后的前端代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>Przesyłanie pliku</title>
</head>
<body>
  <input type="file" id="fileInput">
  <button onclick="uploadFile()">Wyślij plik</button>

  <script>
    function uploadFile() {
      var fileInput = document.getElementById('fileInput');
      var file = fileInput.files[0];
      if (!file) return;

      var requestOptions = {
        method: 'PUT',
        body: file
      };

      fetch("https://v9j07k5dj0.execute-api.eu-central-1.amazonaws.com/dev/umarzamy-chf-upload/file.pdf", requestOptions)
        .then(response => {
          if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
          return response.text();
        })
        .then(result => console.log(result))
        .catch(error => console.error('上传失败:', error));
    }
  </script>
</body>
</html>

更推荐的上传方案：S3预签名URL #

通过API Gateway中转文件上传会增加网关负载，更高效的方式是使用预签名URL：

1. 前端调用API Gateway的一个GET接口，传递文件名、文件类型等参数。
2. 后端（Lambda函数）使用AWS SDK生成S3预签名PUT URL（有效期可自定义），返回给前端。
3. 前端直接使用该预签名URL向S3发送PUT请求上传文件，无需经过API Gateway。

这种方式的优势：

• 减少API Gateway的带宽消耗，提升上传速度。
• CORS配置只需针对S3，更易维护。
• 预签名URL可设置有效期，提升安全性。

内容的提问来源于stack exchange，提问作者Michał Ziaja