前端调用API Gateway触发Lambda时出现TypeError: Failed to fetch错误的解决求助

看起来你遇到了一个典型的跨域请求问题——虽然curl和API Gateway控制台测试都正常，但前端浏览器的同源策略限制会比curl严格很多。结合你提供的信息，我帮你梳理几个可能的原因和解决步骤：

一、先排查CORS头的匹配问题 #

从你提供的curl响应头来看，Lambda返回的Access-Control-Allow-Origin是https://dev.xy.amplifyapp.com/（末尾带斜杠），但你的前端页面域名很可能是不带斜杠的https://dev.xy.amplifyapp.com。浏览器对CORS源的匹配是严格精确匹配的，哪怕多一个斜杠都会被判定为不匹配，进而触发跨域错误。

解决方法：

• 修改Lambda函数的响应头，把Access-Control-Allow-Origin的值改成不带斜杠的域名：https://dev.xy.amplifyapp.com
• 测试阶段可以临时改成*（允许所有源），确认是否是这个问题导致的（生产环境不建议用*，要限制到具体域名）

二、确认API Gateway是否正确配置了CORS #

虽然你在Lambda里返回了CORS头，但API Gateway本身也需要正确处理预检请求（OPTIONS）——浏览器在发送GET请求前，会先自动发送OPTIONS请求验证跨域权限，如果API Gateway没有配置OPTIONS方法的响应，预检失败就会直接导致Failed to fetch错误。

操作步骤：

1. 登录AWS控制台，打开你的API Gateway服务
2. 找到对应的API，定位到GoalGroup资源
3. 点击顶部的「Actions」→「Enable CORS」
4. 在弹出的配置窗口中：
   • 填写Allowed Origins为你的前端域名（比如https://dev.xy.amplifyapp.com）
   • Allowed Methods勾选GET、OPTIONS（以及你需要的其他方法）
   • Allowed Headers填写Content-Type等你需要的头
5. 点击「Enable CORS and replace existing CORS headers」
6. 关键步骤：重新部署你的API到prod阶段（配置变更必须部署才会生效）

三、利用浏览器开发者工具定位具体错误 #

前端的Failed to fetch提示比较笼统，你可以通过浏览器开发者工具获取更详细的错误信息：

1. 打开前端页面，按F12打开开发者工具
2. 切换到「Network」标签，刷新页面并触发请求
3. 查看是否有OPTIONS请求：
   • 如果没有，可能是API Gateway没有配置OPTIONS方法
   • 如果有，看它的状态码是否是200，响应头里有没有正确的CORS配置
4. 查看GET请求的状态和响应头，确认CORS头是否正确返回
5. 切换到「Console」标签，查看是否有更具体的跨域错误提示（比如“Origin not allowed”）

四、检查前端fetch代码的细节 #

你的代码里有个小问题不影响请求，但可以修正：alert('Raw response:', response);这里alert只能显示第一个参数，改成模板字符串会更合理：alert(Raw response: ${response});

另外确认一下fetch的URL和你curl测试的URL是完全一致的（你代码里是orofqutps8，curl里是xy，应该是打码导致的，确保实际是同一个地址）

按照上面的步骤逐一排查，应该能解决这个跨域问题。

备注：内容来源于stack exchange，提问作者Peter Horvath