如何在Puppeteer中替换响应文件？解决请求已被处理错误

错误原因 #

开启page.setRequestInterception(true)后，所有网络请求都必须显式处理（调用request.respond()/request.abort()/request.continue()三者之一）。你的代码只处理了目标URL的请求，其余请求未做处理，导致Puppeteer抛出Error: Request is already handled!。

修正后的代码 #

const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {
    const browser = await puppeteer.launch({
        headless: true,
        userDataDir: './my/path'
    });
    const page = (await browser.pages())[0];
    await page.setRequestInterception(true);

    page.on('request', request => {
        // 匹配目标主页面请求
        if (request.url() === 'https://stackoverflow.com/') {
            // 读取本地HTML文件内容
            const localHtml = fs.readFileSync('./index.html', 'utf-8');
            request.respond({
                status: 200,
                contentType: 'text/html; charset=utf-8',
                body: localHtml
            });
        } else {
            // 其他请求正常放行
            request.continue();
        }
    });

    await page.goto('https://stackoverflow.com');
    await page.screenshot({ path: 'example.jpg' });

    await browser.close();
})();

关键说明 #

• 必须处理所有请求：通过else分支调用request.continue()，让非目标请求正常加载，避免报错。
• 读取本地HTML：使用fs.readFileSync同步读取本地文件（若需异步处理可改用fs.readFile配合Promise）。
• 精准匹配URL：如果目标页面存在重定向，可调整匹配规则（比如用正则匹配/^https:\/\/stackoverflow\.com\/?$/，兼容带斜杠和不带斜杠的情况）。

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