使用axios和cheerio抓取buymeacoffee网站支持者姓名的问题

问题原因 #

Buy Me a Coffee的支持者列表属于客户端动态渲染内容，初始静态HTML页面中不存在该类数据，页面加载完成后会通过JS异步发起接口请求拉取支持者信息，再渲染到DOM中。直接使用axios请求初始页面拿到的源码里没有支持者姓名，无法通过cheerio直接提取。

解决方案 #

方案1：使用无头浏览器模拟页面加载 #

使用Puppeteer这类无头浏览器工具，模拟浏览器打开页面，等待动态内容渲染完成后再提取对应数据，示例代码如下：

import puppeteer from 'puppeteer'
import cheerio from 'cheerio'

export default async function handler(req, res) {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  // 跳转目标页面，等待网络请求基本结束
  await page.goto('https://www.buymeacoffee.com/singtaousa', {
    waitUntil: 'networkidle2'
  })
  // 获取渲染完成后的完整HTML
  const pageContent = await page.content()
  const $ = cheerio.load(pageContent)

  const count = $('.text-fs-16.av-medium.clr-grey.xs-text-fs-14.mg-t-8').text().trim()
  const supporters = []
  // 替换为实际支持者姓名对应的元素选择器，可通过浏览器F12元素选择工具确认
  $('.supporter-item .name').each((i, el) => {
    const name = $(el).text().trim()
    if (name) supporters.push(name)
  })

  await browser.close()
  res.status(200).json({ count, supporters })
}

方案2：直接请求数据接口（推荐） #

打开浏览器开发者工具切换到「网络」标签，刷新页面后筛选XHR/fetch请求，找到返回支持者列表的接口，直接请求该接口即可拿到结构化的JSON数据，无需解析DOM，性能和稳定性都更高，请求时注意和浏览器请求保持一致的头信息即可避免被拦截。

原有代码问题说明 #

原有逻辑遍历所有span标签会提取到大量无关内容，就算拿到完整渲染的DOM也无法直接得到有效支持者姓名，需要先定位到支持者姓名对应的特定类选择器再做筛选。

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