API Gateway含查询字符串的CORS错误排查求助

关于预飞行请求是否未触发的问题 #

不是URL变化导致预飞行请求未触发——你的请求携带了Authorization自定义头，根据CORS规则，这类请求一定会触发OPTIONS预飞行检查。报错提示的是预飞行请求的响应没有返回HTTP 2xx状态，说明OPTIONS请求本身失败了，而非没触发。

先修正前端URL构建的致命错误 #

你的代码错误地对整个路径+查询参数做了encodeURIComponent编码：

const url = invokeURL + encodeURIComponent("invoicess?invYear=" + strParam);

这会把?、=这些URL分隔符转义成编码字符，导致API Gateway接收到的资源路径变成类似invokeURL/%69%6e%76%6f%69%63%65%73%73%3f%69%6e%76%59%65%61%72%3d2024的错误格式，完全不是你配置CORS的/invoicess资源。API Gateway找不到对应资源，OPTIONS请求自然返回404或其他错误状态，触发CORS报错。

正确写法应该只编码查询参数的值：

const url = `${invokeURL}invoicess?invYear=${encodeURIComponent(strParam)}`;

其他排查方向 #

• 检查OPTIONS请求的实际响应：打开浏览器开发者工具Network面板，找到失败的OPTIONS请求，查看：
  • 响应状态码（比如404说明路径不匹配，403说明权限或CORS配置缺失）
  • 响应头是否包含Access-Control-Allow-Origin（值需包含http://localhost:8080）、Access-Control-Allow-Headers（需包含Authorization）
• 验证API Gateway的CORS配置覆盖范围：确保你为/invoicess资源的OPTIONS方法正确配置了CORS（启用CORS时会自动生成OPTIONS方法，但如果路径匹配规则不对，会导致配置失效）
• 确认查询参数是否触发路径匹配问题：如果API资源配置了严格的路径匹配规则，错误的URL编码会导致路径不匹配，进而让OPTIONS请求找不到对应配置
• 检查Lambda对参数的处理逻辑：虽然控制台测试正常，但前端传递的参数可能存在特殊字符等格式问题，导致Lambda返回非200状态码——若API Gateway在Lambda报错时未正确返回CORS头，也可能引发关联问题

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