使用Puppeteer爬取凯悦酒店网站时页面无法加载的问题

核心原因 #

凯悦官网的反爬机制识别出了无头Chromium的自动化特征，直接拦截请求导致页面空白。

针对性修复代码 #

以下是调整后的完整代码，通过模拟更真实的浏览器环境绕过检测：

const puppeteer = require('puppeteer-extra');
const fs = require('fs/promises');
// 引入stealth插件模拟真实浏览器（需先执行安装命令：npm install puppeteer-extra-plugin-stealth）
const StealthPlugin = require('puppeteer-extra-plugin-stealth');
puppeteer.use(StealthPlugin());

let browser;
async function hyattScan() {
  browser = await puppeteer.launch({
    headless: 'new', // 使用新版无头模式，行为更接近真实Chrome
    args: [
      '--no-sandbox',
      '--disable-setuid-sandbox',
      '--disable-blink-features=AutomationControlled',
      '--start-maximized' // 最大化窗口，模拟真实用户操作场景
    ]
  });
  page = await browser.newPage();

  // 设置Chrome原生用户代理，避免跨内核模拟的特征冲突
  const ua = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36';
  await page.setUserAgent(ua);
  await page.setViewport({ width: 1920, height: 1080 });

  // 手动禁用自动化检测标识
  await page.evaluateOnNewDocument(() => {
    Object.defineProperty(navigator, 'webdriver', {
      get: () => undefined
    });
  });

  // 等待页面所有关键资源加载完成，而非仅DOM结构就绪
  await page.goto('https://www.hyatt.com/', { waitUntil: "networkidle2" });

  // 可选：截图验证页面加载状态
  await page.screenshot({ path: 'hyatt-loaded.png' });
  
  await page.waitForTimeout(5000);
}

// 启动爬取程序
(async () => {
    console.log('启动凯悦网站爬取程序...');
    await hyattScan()
      .catch(err => console.error(err))
      .finally(() => browser?.close());
})();

关键修复点说明 #

• 引入stealth插件：自动隐藏Puppeteer的各类自动化特征，绕过反爬检测
• 使用新版无头模式：headless: 'new'相较于旧版，行为更贴近正常浏览器，不易被识别
• 添加启动参数：--disable-blink-features=AutomationControlled直接禁用浏览器的自动化检测标记
• 调整等待策略：将domcontentloaded改为networkidle2，确保页面所有资源加载完成
• 替换用户代理：使用Chrome原生UA，避免跨内核模拟带来的特征不匹配

额外注意事项 #

• 先执行依赖安装命令：npm install puppeteer-extra puppeteer-extra-plugin-stealth
• 若仍存在问题，可添加随机延迟、模拟鼠标移动等操作，进一步贴近真实用户行为
• 控制请求频率，避免触发网站封禁机制

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