AWS API Gateway对接React上传按钮出现403及CORS错误求助

错误核心分析 #

报错同时触发两个问题：

1. CORS策略拦截：请求返回的资源缺少Access-Control-Allow-Origin响应头
2. 403 Forbidden：API端点直接拒绝了请求

分步排查与修复 #

1. 修正请求URL的拼写错误

对比报错信息和代码中的API URL：

• 报错URL：https://6w6k152g.execute-api.us-east-1.amazonaws.com/dev1/test
• 代码URL：https://6w152g.execute-api.us-east-1.amazonaws.com/dev1/test

代码里的URL少了6k字符，这会直接请求到不存在的API端点，触发403错误。先修正这个拼写问题。

2. 配置并重新部署API Gateway的CORS规则

CORS配置必须部署后才会生效，步骤如下：

• 登录AWS控制台，进入API Gateway服务，找到目标API
• 定位到/test资源，点击Actions → Enable CORS
• 在配置弹窗中：
  • 把Access-Control-Allow-Origin设为http://localhost:3000（生产环境建议指定具体域名，不要用*）
  • 勾选POST加入Access-Control-Allow-Methods列表
  • 在Access-Control-Allow-Headers中添加Content-Type（适配formData上传的请求头）
• 点击Enable CORS and replace existing CORS headers，然后必须再次点击Actions → Deploy API，选择dev1阶段完成部署

3. 排查Lambda与API Gateway的权限问题

• Lambda权限：如果Lambda需要向S3上传文件，检查其绑定的IAM角色是否包含s3:PutObject等必要权限，确保权限策略正确关联目标S3桶
• API Gateway资源策略：若API设置了资源策略，确认策略允许http://localhost:3000的来源访问，或者移除不必要的访问限制用于测试
• API授权设置：如果/test资源启用了IAM、Cognito等授权方式，需确保前端请求携带合法的授权凭证；可临时关闭授权测试是否是授权导致的403

4. 前端请求的注意事项

• 不要手动覆盖axios的Content-Type头：上传formData时，axios会自动设置multipart/form-data并添加边界标识，手动设置会破坏请求格式
• 若不需要携带Cookie，可在请求中添加withCredentials: false：

  axios.post("修正后的API URL", formData, { withCredentials: false })
  

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