Amplify Storage上传报Unhandled Rejection Network Error及CORS跨域问题

你的报错核心是S3存储桶未配置允许前端域名跨域访问的CORS规则，按以下步骤操作即可解决：

步骤1：定位目标S3存储桶 #

登录AWS控制台进入S3服务，找到报错信息里对应的存储桶：zanjmob03dfe5b3e56e45e295a1a272470ca517233002-dev

步骤2：配置CORS规则 #

进入存储桶的权限标签页，下滑找到「跨源资源共享(CORS)」配置项，点击编辑，输入以下规则：

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE",
            "HEAD"
        ],
        "AllowedOrigins": [
            "http://localhost:3000",
            "替换为你的线上前端域名，例如https://www.yourdomain.com"
        ],
        "ExposeHeaders": [
            "ETag"
        ]
    }
]

注意：AllowedOrigins不要直接填写通配符*避免安全风险，开发环境填写你本地启动前端的访问地址（比如http://localhost:3000、http://127.0.0.1:5173），生产环境填写实际部署的前端域名即可。

步骤3：验证修复效果 #

配置保存后等待1-2分钟规则生效，再重新测试文件上传功能即可。

额外排查点 #

如果配置完CORS还是报错，可检查以下两项：

• 确认aws-exports配置文件中的Storage区域和S3桶实际所在区域一致，你报错里的桶位于ap-south-1（孟买）区，确认配置没有填写错误
• 确认你当前登录用户的IAM角色具备s3:PutObject操作权限，如果你是通过Amplify CLI自动生成的Storage资源，该权限默认已经配置，如果你手动修改过IAM权限规则需要额外核对

内容的提问来源于stack exchange，提问作者Amir abbasy K