NextJS中fetch获取AWS S3分片上传Etag响应头失败求助

• 问题本质是浏览器CORS限制：S3返回的ETag这类非默认响应头，必须由服务器通过Access-Control-Expose-Headers头明确暴露给前端，否则浏览器会隐藏这些头，导致fetch无法读取。

• 修复步骤：

  1. 登录AWS控制台，找到目标S3存储桶，进入「权限」标签页
  2. 找到「跨域资源共享（CORS）」配置项，修改规则，在ExposeHeaders列表中添加ETag
     参考配置示例：

     [
       {
         "AllowedHeaders": ["*"],
         "AllowedMethods": ["PUT", "POST", "GET"],
         "AllowedOrigins": ["你的NextJS应用域名"],
         "ExposeHeaders": ["ETag", "Content-Length"]
       }
     ]
     

  3. 保存配置后重新发起请求，此时就能通过response.headers.get('ETag')获取到ETag值

• 注意事项：

  • 生产环境不要将AllowedOrigins设为*，建议指定具体的NextJS应用域名，提升安全性
  • 如果是通过NextJS API路由做代理请求，需要在API路由的响应中手动转发ETag头，同时添加Access-Control-Expose-Headers头

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