无需Selenium、Puppeteer，React应用配套Node.js服务器如何爬取数据？

1. 分析目标网站的加载更多接口 #

• 打开浏览器开发者工具（F12）的Network面板，点击目标网站的“加载更多”按钮，观察新增请求的细节：
  • 记录请求的URL、请求方法（GET/POST），以及携带的分页参数（比如page=2、offset=5、lastId=xxx这类标识续传位置的参数）
  • 复制请求Headers中的关键字段（比如User-Agent、Referer、Cookie，这些字段常被用于请求合法性校验）
• 在Node.js服务器中，用axios或node-fetch模拟该请求，带上对应参数即可获取更多数据。示例代码：

  const axios = require('axios');
  
  async function fetchMoreData(page = 2, limit = 5) {
    const response = await axios.get('目标网站的加载更多接口URL', {
      params: {
        page,
        limit,
        // 补充首次请求中发现的其他必要参数，比如token、会话标识等
      },
      headers: {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 ...',
        'Referer': '目标网站的页面URL'
      }
    });
    return response.data;
  }
  

2. 解析页面源码中的隐藏数据 #

• 部分网站会把所有数据提前渲染在页面HTML中，仅通过CSS隐藏后续内容。这种情况下，无需触发加载更多请求，直接解析完整页面即可获取全部数据：

  const axios = require('axios');
  const cheerio = require('cheerio');
  
  async function fetchAllData() {
    const response = await axios.get('目标网站页面URL');
    const $ = cheerio.load(response.data);
    // 选择所有数据节点，示例假设数据在class为"data-item"的元素中
    const allItems = $('.data-item').map((_, el) => {
      return {
        title: $(el).find('.title').text().trim(),
        content: $(el).find('.content').text().trim()
      };
    }).get();
    return allItems;
  }
  

3. 复现前端加密参数逻辑 #

• 如果目标网站的加载更多请求带有加密参数（比如signature、timestamp），可以：
  • 通过浏览器Sources面板定位生成这些参数的前端JS代码，理清加密逻辑（比如哈希算法、时间戳拼接规则）
  • 在Node.js中用crypto模块复现相同逻辑，生成合法参数后再发起请求

4. 配置代理规避IP限制 #

• 若目标网站有IP频次限制，可在Node.js服务器中配置代理池，分散请求来源IP：

  const axios = require('axios');
  const HttpsProxyAgent = require('https-proxy-agent');
  
  async function fetchWithProxy(url, params) {
    const proxyAgent = new HttpsProxyAgent('http://代理IP:端口');
    const response = await axios.get(url, {
      params,
      headers: {/* 必要的Headers */},
      httpsAgent: proxyAgent
    });
    return response.data;
  }
  

内容的提问来源于stack exchange，提问作者evren-aktas