如何在Puppeteer中仅为主页面请求设置请求头而非所有请求

我完全懂你遇到的痛点——page.setExtraHTTPHeaders()会把自定义头无脑加到所有请求上，包括CSS、JS、图片这些资源，根本没法实现只给主页面请求加头的需求。别慌，咱们用请求拦截就能精准搞定这个问题，核心思路就是只拦截并修改主页面的导航请求，其他资源请求直接放行。

具体实现代码 #

先启用请求拦截，然后在request事件里做精准判断：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // 第一步：启用请求拦截功能
  await page.setRequestInterception(true);

  page.on('request', (request) => {
    // 仅给主框架的导航请求添加自定义头
    // request.isNavigationRequest() 识别页面初始加载/跳转这类导航请求
    // request.frame() === page.mainFrame() 确保是主页面请求，排除iframe等子框架
    if (request.isNavigationRequest() && request.frame() === page.mainFrame()) {
      // 克隆原请求头，加入自定义字段
      const updatedHeaders = {
        ...request.headers(),
        'X-Just-Must-Be-Request-In-Main-Request': '1'
      };
      // 修改头后继续发起请求
      request.continue({ headers: updatedHeaders });
    } else {
      // 非主页面请求直接放行，保留原请求头
      request.continue();
    }
  });

  // 访问目标页面
  await page.goto('https://example.com');

  // 后续业务操作...
  await browser.close();
})();

关键逻辑拆解 #

• page.setRequestInterception(true)：必须先开启请求拦截，才能对请求内容做修改
• request.isNavigationRequest()：专门识别页面初始加载、刷新、链接跳转这类“主页面级”的请求
• request.frame() === page.mainFrame()：额外加一层判断，避免给iframe里的导航请求也加头（如果不需要这个限制，可以直接去掉这部分）
• 非主请求直接调用request.continue()，完全不改动原请求头

这么设置后，只有主页面的导航请求会带上你的自定义头，其他资源请求完全不受影响，正好匹配你的需求~

内容的提问来源于stack exchange，提问作者Mohammad Hossein Fattahizadeh