AWS CloudFront与API Gateway间CORS配置问题求助

以下是针对你遇到的问题的具体排查项，按优先级检查：

• 确认API Gateway的CORS资源配置
  登录API Gateway控制台，找到对应API的目标资源（比如/api/xxx），检查CORS设置：

  • 确保Access-Control-Allow-Origin字段明确包含你的https://CLOUDFRONT_URL，生产环境不建议用*通配符（除非允许所有来源）；
  • 同时确认Access-Control-Allow-Methods包含你Web应用使用的请求方法（比如POST、GET），Access-Control-Allow-Headers包含请求中带的自定义头（比如Content-Type）。

• 检查OPTIONS预检请求的处理
  浏览器发起跨域请求前会先发OPTIONS预检，API Gateway必须正确响应：

  • 如果是自动生成的OPTIONS方法，确保没有被手动修改过；如果是手动配置的OPTIONS方法，要在响应头里返回所有CORS相关字段，和资源的CORS配置保持一致。

• 配置CloudFront转发Origin请求头
  CloudFront默认不会把浏览器的Origin头转发给API Gateway，导致API Gateway无法识别来源，从而不返回正确的CORS头：

  1. 进入CloudFront控制台，找到对应的分发；
  2. 编辑缓存行为，在“缓存键和源请求”下选择“自定义”转发请求头；
  3. 添加Origin到转发列表中，保存并等待CloudFront部署生效（可能需要几分钟）；
  4. 测试前先手动清除CloudFront的缓存，避免旧缓存影响结果。

• 验证后端服务的响应头
  如果你的API Gateway是集成Lambda等后端服务，要确认后端是否返回了CORS头：

  • 比如Lambda函数的响应必须包含Access-Control-Allow-Origin等字段，示例代码：

    def lambda_handler(event, context):
        return {
            "statusCode": 200,
            "headers": {
                "Access-Control-Allow-Origin": "https://CLOUDFRONT_URL",
                "Access-Control-Allow-Methods": "POST, OPTIONS",
                "Access-Control-Allow-Headers": "Content-Type"
            },
            "body": json.dumps({"message": "success"})
        }
    

  • 注意：不要同时让API Gateway和后端都返回CORS头，容易导致冲突，建议统一由API Gateway配置处理。

• 确认API Gateway部署生效
  修改API Gateway的CORS配置后，必须点击部署API，选择对应的阶段（比如prod），否则修改不会生效。这是很多人容易忽略的步骤。

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