如何配置AwsWafIntegration.fetch返回失败响应而非抛出错误？

问题描述 #

使用AwsWafIntegration.fetch发送需要CAPTCHA验证的POST请求时，集成会抛出TypeError: Failed to fetch错误，而非返回预期的失败响应（比如405状态码）。无需CAPTCHA或验证成功的请求功能正常，且曾出现过返回失败响应的情况，但无法复现触发条件。

背景配置 #

已将负载均衡器关联到Web ACL，并配置规则允许所有HTTP OPTIONS方法请求（这是CAPTCHA集成预取条件生效的必要设置）。

官方预期工作流 #

根据AWS官方文档，预期的CAPTCHA处理流程如下：

const result = await AwsWafIntegration.fetch(url, {
        method: "POST",
        body: send_dat,
});

if (result.status === 405) {
    const container = document.querySelector("#my-captcha-box");
    AwsWafCaptcha.renderCaptcha(container, {
        apiKey: "...API key goes here...",
        onSuccess() {
            // 验证通过后重试请求
            loadData();
        },
    });
    return;
}

当前困境 #

由于AwsWafIntegration.fetch直接抛出错误，无法区分这是CAPTCHA拦截、其他请求错误还是服务端异常。目前只能用try-catch包裹所有请求，将所有TypeError: Failed to fetch都视为需要CAPTCHA验证，导致用户体验极差。

现有实现代码 #

当前使用的try-catch逻辑：

async function wafRequest(url, send_data) {
  let wafRes;
  try {
    wafRes = await AwsWafIntegration.fetch(url, {
      method: "POST",
      body: send_data,
    });
  } catch (error) {
    console.log("An error occurred: ", error);
  }

  if (wafRes && wafRes.ok) {
    return await handleResponse(wafRes, url);
  }


  if (!wafRes || (wafRes && wafRes.status === 405)) {
    await displayCaptchaAndFetchToken();

    let newWafRes;
    try {
      newWafRes = await AwsWafIntegration.fetch(url, {
        method: "POST",
        body: send_data,
      });
    } catch (error) {
      console.log("An error occurred: ", error);
    }

    if (newWafRes && newWafRes.ok) {
      return await handleResponse(newWafRes, url);
    } else {
      throw new Error("WAF check failed after captcha");
    }
  }
}

解决方案思路 #

1. 调整Web ACL规则的响应配置 #

• 确认CAPTCHA触发规则的动作类型：将规则动作从Block改为Return Response，并配置返回状态码为405、响应内容符合集成要求。如果设置为Block，浏览器会因请求被直接拦截而抛出fetch错误，无法得到标准响应。
• 验证规则优先级：确保允许OPTIONS方法的规则优先级高于CAPTCHA规则，避免预取请求被拦截导致集成逻辑异常。

2. 调试请求与WAF日志 #

• 使用浏览器开发者工具查看网络请求：触发CAPTCHA时，确认是否有实际的HTTP响应返回。如果请求显示为“已取消”或无响应，说明WAF规则配置为阻断，需调整动作类型。
• 查看CloudWatch中的WAF日志：确认规则触发时的动作细节，是否返回了预期的405响应，排查是否存在规则冲突或配置遗漏。

3. 检查AWS WAF客户端版本与初始化 #

• 升级AwsWafIntegration客户端库到最新版本，部分旧版本的bug可能导致错误处理逻辑异常。
• 确认客户端初始化参数是否正确，部分版本的集成库需要显式开启“错误映射为HTTP响应”的配置项，可参考官方文档核对参数。

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