启用AWS WAF验证码后API Gateway POST请求出现CORS错误

核心问题 #

AWS ApiGateway REST API添加WAF验证码防护规则后出现CORS错误，切换为仅允许访问的规则则正常；使用restninja.io携带验证码令牌发起请求可正常访问，但前端通过WAF集成工具请求失败，采用的是WAF验证码应用集成（自有页面渲染）方案。

排查与解决步骤 #

1. 修正API Gateway的CORS配置 #

启用WAF验证码后，请求/响应会涉及额外头信息或Cookie，需确保API Gateway的CORS配置满足以下要求：

• 将Access-Control-Allow-Origin设置为前端具体域名（不能用*，涉及凭证传递时*不被允许）
• 开启Access-Control-Allow-Credentials并设为true
• 在Access-Control-Allow-Headers中添加X-Aws-Waf-Token（若通过请求头传递令牌）
• 确保OPTIONS预检请求的CORS配置与POST请求一致，且WAF规则不拦截OPTIONS请求

2. 确保前端正确传递验证码令牌 #

调整你的请求代码，确保令牌和凭证配置正确：

const response = await (window as any).AwsWafIntegration.fetch(url, {
    method: "POST",
    credentials: "include", // 开启凭证传递，允许Cookie携带令牌
    headers: {
      "Content-Type": "application/json",
      "X-Aws-Waf-Token": token // 显式传递令牌，或依赖WAF封装自动处理
    },
    body: JSON.stringify(data),
});

注：AwsWafIntegration.fetch封装理论上会自动处理令牌传递，但手动注释相关配置可能导致令牌未正确携带，引发WAF拦截后因响应缺少CORS头而报错。

3. 检查WAF规则的细节配置 #

• 确认WAF验证码规则仅针对POST请求生效，不对OPTIONS预检请求应用验证码检查（OPTIONS请求无法携带令牌，会直接被拦截）
• 验证WAF应用集成的API Key已正确关联到目标WebACL，且前端域名在WAF允许的来源列表中
• 检查WAF规则动作配置：确保验证码验证通过后执行Allow动作，而非其他阻断请求的动作

4. 对比restninja.io与前端请求的差异 #

restninja.io请求正常说明API和WAF规则本身无问题，差异可能在于：

• restninja.io自动携带了正确的凭证或请求头
• 前端请求的Origin域名未被API Gateway的CORS配置允许
• 前端未开启credentials导致令牌未通过Cookie传递

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