使用x-api-key header在AWS API Gateway实现CORS请求遇问题求助

问题背景 #

我在AWS上搭建了一个简单的REST API Gateway，关联基础的“hello world”Lambda函数，GET方法绑定到/资源。直接浏览器GET请求（添加API密钥并关联使用计划）和curl GET请求（携带x-api-key header）均正常工作。但启用CORS后，通过Ajax/jQuery脚本请求资源时出现故障：预检OPTIONS请求返回500服务器错误，实际GET请求在浏览器控制台报CORS错误。我已在AWS的启用CORS页面将https://www.w3schools.com添加到Access-Control-Allow-Origin字段，但尝试多次仍未解决问题，求排查建议。

测试代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>

$.ajax({
    type: "GET",
    url: "<MY APIGateway URL>",
    headers: { 
        "x-api-key": "<MY API KEY>"
    },
    success: function(result){
      console.log('Working!')
    }
 });

</script>
</head>
<body>

</body>
</html>

排查步骤 #

• 调整OPTIONS方法的API密钥验证设置：API Gateway启用CORS时会自动创建OPTIONS方法，但如果你的API全局要求API密钥，OPTIONS方法默认可能也开了验证。进入/资源下的OPTIONS方法，在方法请求里把API Key Required改成false——预检请求不会携带API密钥，强制验证会直接返回500。
• 补全CORS的header配置：启用CORS时，确保Access-Control-Allow-Headers字段包含x-api-key，因为你的请求带了这个自定义header，预检请求会校验这个配置，缺失的话会触发错误。同时确认配置是应用到/资源（而非单独的GET方法）。
• 查看CloudWatch日志找具体报错：进入API Gateway控制台，找到对应API的监控->日志，查看OPTIONS请求的详细日志。500错误通常会明确指出原因，比如Lambda关联错误、权限不足、header格式不合法等。
• 检查Lambda响应的CORS header：虽然直接GET请求正常，但如果Lambda返回的响应里没包含CORS相关header，浏览器仍会报错。可以在Lambda代码里手动添加：

# Python示例
import json

def lambda_handler(event, context):
    return {
        'statusCode': 200,
        'headers': {
            'Access-Control-Allow-Origin': 'https://www.w3schools.com',
            'Access-Control-Allow-Headers': 'x-api-key'
        },
        'body': json.dumps('Hello from Lambda!')
    }

注意：如果API Gateway已配置CORS，通常会自动添加header，但如果Lambda返回的header和网关配置冲突，也会出问题。

• 重新部署API：每次修改CORS或方法配置后，必须重新部署到对应阶段，否则修改不会生效——这是最容易忽略的步骤。
• 简化请求测试：先去掉x-api-key header发起请求，如果能正常响应，说明问题出在自定义header的CORS配置上；如果还是报错，再聚焦到基础CORS配置和OPTIONS方法的问题。

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