AWS WAF自定义响应无法被浏览器JS访问，求非代理解决方案

核心原因 #

浏览器的同源策略（CORS）限制：当WAF直接返回自定义响应（如406）时，若响应未携带符合要求的CORS头，浏览器会阻止JavaScript代码访问响应对象，仅抛出TypeError: Failed to fetch错误——即使网络面板能看到完整响应内容。

可行解决方案（无需额外代理） #

1. 给WAF自定义响应添加CORS头 #

在AWS WAF的自定义响应配置中，手动添加必要的CORS响应头：

• 必须添加：Access-Control-Allow-Origin（设置为你的前端域名，或*用于测试，生产环境建议指定具体域名）
• 按需添加：Access-Control-Allow-Headers、Access-Control-Allow-Methods，匹配前端请求的头和方法

配置完成后，前端fetch/axios就能正常捕获到406响应，读取状态码和自定义头custom-header。

2. 改用兼容AJAX的状态码+自定义响应体 #

如果406状态码触发浏览器特殊处理，可改用更通用的403（Forbidden）状态码，同时在WAF自定义响应中添加JSON格式的响应体，比如：

{"code": "geo_restricted", "message": "当前地区无法访问"}

配合CORS头配置，前端可通过res.json()解析响应体，获取限制信息。

3. 用CloudFront Functions/Lambda@Edge补全CORS头 #

若WAF无法直接配置自定义响应头（或配置受限），可通过CloudFront的边缘计算能力拦截响应并补全CORS头：

• CloudFront Functions（轻量、低成本）：创建Viewer Response类型的函数，检查响应状态码为406时注入CORS头：

function handler(event) {
    const response = event.response;
    const headers = response.headers;
    
    if (response.statusCode === 406) {
        headers['access-control-allow-origin'] = { value: 'https://your-frontend-domain.com' };
        headers['access-control-allow-headers'] = { value: '*' };
    }
    
    return response;
}

• Lambda@Edge（更灵活）：在Viewer Response事件中部署Lambda函数，逻辑同上，适合需要复杂处理的场景。

前端代码调整提示 #

不要设置mode: "no-cors"（会导致opaque响应，无法读取任何内容），保持默认的cors模式即可。示例调整后代码：

fetch(URL, {
  headers: {
    Accept: "application/json, text/plain, */*",
    // 其他请求头
  }
})
.then((res) => {
  if (res.status === 406) {
    const customHeader = res.headers.get('custom-header');
    console.log('受限标识：', customHeader);
    // 处理逻辑，比如提示用户
  } else {
    // 正常请求处理
    return res.json();
  }
})
.catch((err) => {
  console.log('请求错误：', err);
});

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