Node.js中用Puppeteer捕获含v2名称的Fetch/XHR请求JSON响应

直接上可运行的Node.js代码，核心是通过Puppeteer的response事件监听过滤目标请求：

const puppeteer = require('puppeteer');

(async () => {
  // 启动浏览器，headless模式可按需切换为false（可视化）
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();

  // 存储捕获到的目标响应数据
  const targetResponses = [];

  // 监听所有页面响应，过滤符合条件的请求
  page.on('response', async (response) => {
    const req = response.request();
    // 筛选规则：资源类型为XHR/Fetch + URL包含v2
    if (['xhr', 'fetch'].includes(req.resourceType()) && response.url().includes('v2')) {
      try {
        // 解析响应为JSON格式
        const jsonData = await response.json();
        targetResponses.push({
          requestUrl: response.url(),
          requestMethod: req.method(),
          responseData: jsonData
        });
        console.log(`已捕获请求：${response.url()}`);
      } catch (err) {
        // 跳过非JSON格式的响应
        console.log(`${response.url()} 非JSON响应，忽略: ${err.message}`);
      }
    }
  });

  // 访问目标页面，等待网络空闲确保请求加载完成
  await page.goto('你的目标页面URL', { waitUntil: 'networkidle2' });

  // 可选：如果页面有延迟加载的请求，增加等待时间
  await page.waitForTimeout(2000);

  // 输出最终捕获的所有数据
  console.log('\n===== 捕获到的响应数据 =====');
  targetResponses.forEach(item => {
    console.log(`\n请求地址：${item.requestUrl}`);
    console.log(`请求方法：${item.requestMethod}`);
    console.log(`响应内容：`, item.responseData);
  });

  await browser.close();
})();

关键逻辑说明 #

• 响应监听：通过page.on('response')捕获页面所有请求的响应，覆盖Fetch和XHR类型的AJAX请求
• 过滤规则：用resourceType()区分请求类型，配合url().includes('v2')精准定位目标请求
• JSON解析：用response.json()直接解析响应体，加try/catch处理非JSON响应的异常情况
• 等待策略：waitUntil: 'networkidle2'确保页面加载完成后大部分请求已结束，额外的waitForTimeout可适配延迟加载的请求

适配现有代码 #

如果你的现有代码只获取HTML，只需在page.goto()之前添加上述的response监听逻辑即可，无需改动原有获取HTML的代码。

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