如何使用JavaScript获取Chrome Network面板可见XHR接口的JSON响应数据

核心问题原因 #

• 你的测试代码存在语法错误：.then嵌套逻辑混乱，代码本身无法正常执行
• 接口有请求校验规则：直接访问URL无返回是因为接口校验请求头、Cookie等身份参数，缺失对应参数时接口返回空
• 响应解析逻辑错误：接口返回JSON格式，你先转文本再取层级字段的方式不正确

可用JS实现代码 #

运行要求：必须在目标数据所属的网站页面下打开控制台执行，否则会触发跨域限制，也无法自动携带站点鉴权Cookie

// 请先从开发者工具Network面板的该请求详情里，复制所有请求头参数填入下方headers对象
const customHeaders = {
  "X-Requested-With": "XMLHttpRequest", // XHR类接口必填标识头
  "Referer": "你在请求头里看到的实际Referer地址",
  "Accept": "application/json, text/javascript, */*; q=0.01"
  // 其余请求头按"头字段名": "头字段值"的格式补充完整
}

fetch("https://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx?&action=get_vehicles", {
  method: "GET", // 如果是POST请求就改成"POST"
  headers: customHeaders,
  credentials: "include" // 自动携带当前站点的Cookie，必填
})
.then(res => {
  console.log("接口响应状态：", res.status)
  if (!res.ok) throw new Error("请求失败，状态码：" + res.status)
  return res.json()
})
.then(result => {
  console.log("完整返回数据：", result)
  console.log("data字段内容：", result.data)
})
.catch(error => {
  console.error("请求错误详情：", error)
})

排查补充说明 #

• 如果是POST类型的请求，需要在fetch配置中新增body参数，传入和浏览器请求一致的表单/JSON参数
• 若运行后仍返回空，逐一对比你在Network面板中看到的请求头、URL参数，确保和浏览器发起的原始请求完全一致即可

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