AWS CloudResumeChallenge访客计数器CORS跨域问题求助

核心问题定位 #

Postman能正常请求但前端报错，说明API Gateway未正确处理OPTIONS预检请求——浏览器发起跨域请求前会先发送OPTIONS请求验证权限，该请求由API Gateway直接处理，而非Lambda，仅在Lambda中配置CORS头无法解决问题。

具体解决步骤 #

1. 配置API Gateway的CORS规则 #

• 登录AWS控制台，找到目标API Gateway实例
• 定位对应API的资源（如/counter），点击Actions -> Enable CORS
• 在配置弹窗中：
  • 将Access-Control-Allow-Origin设为你的域名https://justinhenson.cloud（生产环境不建议用*，指定具体域名更安全）
  • 勾选Access-Control-Allow-Methods中的GET和OPTIONS
  • 确保Access-Control-Allow-Headers包含Content-Type等必要请求头
  • 保存配置后重新部署API（未部署则配置不会生效）

2. 校验Lambda返回的CORS头 #

确保app.py中返回的响应头与API Gateway配置一致：

return {
    'statusCode': 200,
    'headers': {
        'Access-Control-Allow-Origin': 'https://justinhenson.cloud',
        'Access-Control-Allow-Credentials': True  # 前端带Cookie时需开启，否则可选
    },
    'body': json.dumps({'count': visitor_count})
}

3. 检查前端请求细节 #

确认scripts.js中的请求URL为API Gateway的正确部署地址（如https://xxxx.execute-api.region.amazonaws.com/prod/counter），且请求方法为GET，无额外自定义头触发预检失败。示例代码：

fetch('https://你的API部署地址/prod/counter')
  .then(response => response.json())
  .then(data => {
    document.getElementById('counter').textContent = data.count;
  })
  .catch(error => console.error('获取计数失败:', error));

4. 清理浏览器缓存 #

浏览器可能缓存了旧的OPTIONS响应，使用无痕模式测试或手动清理缓存，避免旧配置干扰。

额外排查点 #

• 确认API Gateway部署阶段（如prod）与前端请求URL完全匹配
• 查看CloudWatch日志，检查OPTIONS请求是否到达API Gateway及是否存在报错
• 若使用SAM部署，需在template.yaml中配置API Gateway的CORS规则，防止手动配置被覆盖：

Resources:
  CounterApi:
    Type: AWS::Serverless::Api
    Properties:
      StageName: prod
      Cors:
        AllowOrigin: "'https://justinhenson.cloud'"
        AllowMethods: "'GET,OPTIONS'"
        AllowHeaders: "'Content-Type'"

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