使用Puppeteer处理本地文件仍发起服务器请求的问题求助

看起来你已经做了不少针对性优化：缓存页面到本地、Mock数据接口，但还是遇到了意外的线上请求。这种情况通常是页面里的外部资源引用或者未被Mock的其他请求导致的，下面给你几个可落地的解决方案：

1. 拦截所有非必要请求（最直接的方法） #

Puppeteer提供了请求拦截功能，你可以在加载页面前设置规则，只允许本地file://协议的请求，其他全部阻止。这样不管页面里藏了什么外部资源，都不会发起请求。

修改你的gotoPage函数，在page.goto之前添加拦截逻辑：

const gotoPage = async(url) => {
 try {
 const page = await browser.newPage();

 // 启用请求拦截
 await page.setRequestInterception(true);
 page.on('request', (request) => {
   // 允许主文档（本地HTML）和file协议的请求
   if (request.resourceType() === 'document' || request.url().startsWith('file://')) {
     request.continue();
   } else {
     // 阻止所有其他请求（包括外部CSS、JS、图片、统计脚本等）
     request.abort();
   }
 });

 // 重写'fetchAccountData'函数
 await page.evaluateOnNewDocument(testData => {
 window["fetchAccountData"] = (cb) => {
 cb(null, testData);
 };
 }, data);

 // 访问页面并截图
 await page.goto(url);
 const screenie = `${outputPath}${uuid()}.png`;
 await page.screenshot({ fullPage: true, path: screenie, type: "png" });
 pageHtml.push(`<img src="file://${screenie}" />`);
 next(browser, rest);
 } catch (e) {
 cb(e, null);
 }
};

这个方法能快速切断所有外部请求，你可以先试试这个，确认是否还会触发防火墙限制。

2. 清理本地HTML中的外部资源引用 #

你保存的HTML页面里可能还包含大量外部资源的链接（比如线上的CSS、JS、图片、字体等），这些链接会让浏览器自动发起请求。你可以在保存页面到本地时，把这些外部资源要么下载到本地替换路径，要么直接移除（如果不影响截图效果的话）。

修改你保存页面的代码，在写入文件前处理HTML内容：

.then(contents => {
  // 处理外部资源：这里示例是移除所有线上的CSS、JS、图片，你可以根据需求调整
  const processedHtml = contents
    // 移除外部CSS链接
    .replace(/<link[^>]+href="https?:\/\/[^"]+"[^>]*>/g, '')
    // 移除外部JS脚本
    .replace(/<script[^>]+src="https?:\/\/[^"]+"[^>]*><\/script>/g, '')
    // 移除外部图片
    .replace(/<img[^>]+src="https?:\/\/[^"]+"[^>]*>/g, '');

  fs.writeFile(fullFileName, processedHtml, 'utf8', err => {
    if (err) { cb(err, null); }
    else { this._linkCache[baseLink] = fileUrl; gotoPage(fileUrl); }
  });
})

如果需要保留页面样式和功能，建议把这些外部资源也下载到本地目录，然后将HTML里的链接替换成相对路径，这样加载本地页面时就会读取本地资源，不会请求线上。

3. 验证fetchAccountData的Mock是否生效 #

虽然你用了evaluateOnNewDocument来重写函数，但有可能页面里的脚本在Mock生效前就调用了fetchAccountData（比如内联脚本在<head>里立即执行）。你可以开启调试模式确认Mock是否生效：

1. 启动Puppeteer时关闭headless模式：

puppeteer.launch({ userDataDir: "temp/", headless: false, devtools: true })

2. 在Mock函数里添加日志：

await page.evaluateOnNewDocument(testData => {
  console.log("Original fetchAccountData:", window.fetchAccountData);
  window["fetchAccountData"] = (cb) => {
    console.log("Mocked fetchAccountData called!");
    cb(null, testData);
  };
}, data);

打开浏览器的开发者工具，查看控制台日志，确认Mock函数是否被正确调用。如果没有看到Mocked fetchAccountData called!，说明页面里的请求可能不是通过这个函数发起的，需要进一步排查其他请求入口。

4. 优化userDataDir的使用 #

userDataDir主要用于缓存浏览器资源，但如果页面里的资源缓存过期或者资源URL带有随机参数，浏览器还是会发起请求。不过结合前面的请求拦截，这个配置的优先级不如直接拦截请求高，你可以保留它，但主要依赖请求拦截来阻止不必要的请求。

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