为何Puppeteer中止非白名单资源请求后服务器仍能收到CSS请求？

我刚看了你的代码，大概率是踩了Puppeteer请求拦截的一个常见坑——你没启用请求拦截功能！

Puppeteer默认是不会拦截请求的，哪怕你注册了request事件监听，这个事件也根本不会被触发。所有请求该发还是发，服务器自然能收到CSS请求。

先给你拆解下核心问题点：

• 你的代码里缺少了关键的await page.setRequestInterception(true);这一行，这是开启请求拦截的开关，必须在注册request监听之前调用。
• 另外还要注意监听事件的注册时机：如果是在page.goto()之后才绑定request事件，页面初始化阶段的CSS请求已经发出去了，拦截逻辑根本没机会生效。

给你修正后的代码，你可以直接测试：

// 第一步：开启请求拦截，这是核心前提！
await page.setRequestInterception(true);

// 第二步：注册请求监听，务必在页面跳转前设置好
page.on('request', req => {
  try {
    const whitelist = ['document', 'script', 'xhr', 'fetch'];
    if (!whitelist.includes(req.resourceType())) {
      return req.abort();
    }
    req.continue();
  } catch(err) {
    console.log(err);
  }
});

// 第三步：再跳转目标页面
await page.goto(url, {waitUntil: 'networkidle0'});

除了这个核心问题，还有两个小概率情况你可以排查：

• 页面里有通过fetch或xhr动态加载的CSS：这种资源会被你的白名单放行，因为你把fetch和xhr加入了白名单，如果要拦截这类动态CSS，得额外判断URL里的CSS后缀或者响应内容类型。
• Service Worker干扰：如果目标页面启用了Service Worker，它可能会在拦截逻辑之前处理请求，导致CSS请求还是发出去了。可以试试禁用Service Worker：await page.setCacheEnabled(false);，或者在启动浏览器时添加--disable-service-workers参数。

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