JavaScript使用fetch请求数据时遭遇Cloudflare拦截如何解决？

问题根源 #

原生fetch默认发起的请求缺少真实浏览器的访问特征，且未携带合法会话Cookie时，会被Cloudflare的防护规则识别为爬虫流量，返回人机验证拦截页；同时当前代码存在逻辑缺陷：当接口返回HTML格式的拦截页时，直接调用response.json()会触发JSON解析错误，无法正常拿到返回内容排查问题。

调整步骤 #

• 第一步：补全请求配置，模拟真实浏览器的请求特征，同时修正响应解析逻辑，避免解析报错

const response = await fetch(url, {
  headers: {
    'Accept': 'application/json, text/plain, */*',
    'Accept-Language': 'zh-CN,zh;q=0.9,en;q=0.8',
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36',
    'Referer': new URL(url).origin,
    'Sec-Fetch-Dest': 'empty',
    'Sec-Fetch-Mode': 'cors',
    'Sec-Fetch-Site': 'same-origin'
  },
  credentials: 'include'
})

const contentType = response.headers.get('content-type')
if (!response.ok) throw new Error(`请求失败，状态码：${response.status}`)

if (contentType?.includes('application/json')) {
  const targetData = await response.json()
  // 此处处理正常返回的目标数据
} else {
  const interceptContent = await response.text()
  console.error('被Cloudflare拦截，返回内容：', interceptContent)
}

• 第二步：如果补全请求头后依然返回拦截页，说明目标站点开启了强制人机校验（5秒盾、Turnstile验证等），这类校验会验证浏览器的JS执行环境、TLS指纹、WebAPI特征，纯服务端runtime的原生fetch无法伪造这些特征，可选择两种合规方案处理：
  • 优先对接目标站点官方提供的开放API获取数据，官方公开接口通常不会配置Cloudflare爬虫拦截规则
  • 确需调用前端接口时，使用无头浏览器工具模拟真实用户访问，在浏览器环境内完成Cloudflare校验拿到有效会话Cookie后，再携带合法Cookie发起数据请求

注意：禁止使用破解验证、恶意伪造特征的手段访问未授权的站点资源，这类行为违反目标站点服务条款，可能存在合规风险。

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