Vue.js调用AWS API Gateway DELETE请求遭遇CORS跨域拦截问题求助

问题概述 #

使用Vue.js通过axios发送DELETE请求至AWS API Gateway触发Lambda函数，但响应中始终不包含Access-Control-Allow-Origin字段，导致跨域验证失败。

已完成的配置 #

• 在API Gateway中创建了DELETE方法
• 配置OPTIONS方法：勾选DEFAULT 4XX和DEFAULT 5XX网关响应，关联DELETE与OPTIONS方法，手动设置Access-Control-Allow-Headers为Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token，并指定了Access-Control-Allow-Origin的来源列表，且确认配置已保存
• Lambda函数响应已添加对应CORS头部
• 客户端已按截图配置请求代码

已尝试的解决方案 #

• 在请求中添加Access-Control-Allow-Origin: '*'头部或指定具体来源
• 将API Gateway的Access-Control-Allow-Origin设置为*
• 取消DELETE及其他方法的Lambda Proxy Integration
• 在Lambda响应中添加Access-Control-Allow-Methods（指定方法列表）
• 替换axios为fetch发起请求

待排查的关键环节 #

1. 确认API Gateway部署状态：所有配置修改后必须重新部署到对应阶段，未部署的话新配置不会生效。这是最容易忽略的步骤，哪怕保存了配置，未部署则仍使用旧规则。
2. 检查Lambda Proxy Integration的响应格式：若开启了Lambda Proxy，Lambda的响应必须严格遵循API Gateway要求的结构，CORS头部需放在headers字段中，注意字段名大小写（如Access-Control-Allow-Origin不能拼写错误）。示例响应格式：

{
  "statusCode": 200,
  "headers": {
    "Access-Control-Allow-Origin": "你的前端域名",
    "Access-Control-Allow-Methods": "DELETE,OPTIONS",
    "Access-Control-Allow-Headers": "Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token"
  },
  "body": "操作成功"
}

3. 查看API Gateway CloudWatch日志：开启CloudWatch日志，追踪请求经过网关的完整流程，排查是否存在网关修改/丢弃头部、OPTIONS请求响应不符合预期等情况。
4. 验证请求的实际Origin：在浏览器开发者工具的Network面板中查看DELETE请求的Origin字段，确认该值是否完全匹配API Gateway中Access-Control-Allow-Origin配置的来源列表（比如前端是http://localhost:8080，配置的是https://localhost:8080就会不匹配）。
5. 清理API Gateway缓存：若之前存在错误的CORS配置，网关可能缓存了旧响应。可尝试清理缓存或修改阶段名称后重新部署。
6. 检查Lambda执行角色与报错情况：确保Lambda执行角色权限足够，同时查看Lambda日志确认是否有运行错误——若Lambda报错，API Gateway可能返回默认响应，不带CORS头部。
7. 尝试API Gateway一键配置CORS：删除手动配置的OPTIONS方法，使用API Gateway的「Enable CORS」功能自动配置，完成后重新部署，避免手动配置的遗漏或冲突。

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