如何为Percy快照的初始请求传递自定义请求头？

你的核心问题是：初始页面请求没有携带自定义请求头，导致返回403。你传给percySnapshot的requestHeaders选项仅作用于Percy抓取页面依赖资源（CSS/JS等）的阶段，对page.goto发起的初始页面请求无效。

解决方案 #

通过Puppeteer的page.setExtraHTTPHeaders方法，在页面加载前设置全局额外请求头，这样初始页面请求和后续资源请求都会携带该头：

修改后的代码 #

const puppeteer = require('puppeteer');
const percySnapshot = require('@percy/puppeteer');

const pageReferences = [
    'https://www.my-url.com',
];

const customHeaders = {
    "proxy-authorization":"************"
};

(async () => {
    const browser = await puppeteer.launch({
        headless: true,
        args: ['--no-sandbox']
    });
    let page = await browser.newPage();
    
    // 全局设置额外HTTP头，初始请求会携带
    await page.setExtraHTTPHeaders(customHeaders);
    
    await page.goto(pageReferences[0]);
    // 若资源发现阶段也需要该头，可保留requestHeaders配置
    await percySnapshot(page, pageReferences[0], { requestHeaders: customHeaders });
    
    await browser.close();
})();

可选方案（仅初始请求带 header） #

如果仅需要初始页面请求携带该头，可直接在page.goto的参数中指定：

await page.goto(pageReferences[0], {
    headers: customHeaders
});

注意：这种方式下，后续页面加载的资源不会自动带上该头，若资源也需验证权限，建议使用全局设置方案。

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