如何在获取网络字体时删除自定义 header 字段？

Question

我在尝试从 Google 获取字体时偶然发现了 CORS 错误。

我目前有一个 express.js 服务器为人偶操纵机器人提供 html 文件。我需要使用自定义 header 字段验证向该服务器发送请求的用户。但是，当 html 文件从 Google 获取字体时，它使用自定义 header 并且请求失败并出现以下错误：

Access to font at 'http://fonts.gstatic.com/s/allura/v18/9oRPNYsQpS4zjuA_iwgW.woff2' from origin 'http://localhost:5000' has been blocked by CORS policy: Request header field test-token is not allowed by Access-Control-Allow-Headers in preflight response.

我在下面的一个更小的脚本中复制了这个问题：

const puppeteer = require('puppeteer');
const express = require('express');
const app = express();
//middleware
app.use((req,res,next)=>{
    //verify token
    if(req.header("test-token") === "foobarbaz") return next();
})
app.use(express.static("public"));
app.listen(5000);


(async()=>{
    const browser = await puppeteer.launch({
        ignoreHTTPSErrors:true,
        headless:true,
    });
    const page = await browser.newPage();
    //for debug purposes
    page.on("console",console.log);
    
    page.setExtraHTTPHeaders({
        "test-token":"foobarbaz"
    })
    await page.goto("http://localhost:5000/index.html");
    const content = await page.content();
    console.log(content);
})()

我的样本 HTML 加载了网络字体的文件：

<html>
    <head>
        <link rel="preconnect" href="//fonts.googleapis.com">
        <link rel="preconnect" href="//fonts.gstatic.com" crossorigin>
        <link href="//fonts.googleapis.com/css2?family=Allura&family=Bebas+Neue&family=Bree+Serif&family=Twinkle+Star&display=swap" rel="stylesheet">
        <style>
            body{
                font-family: 'Allura', cursive;
            }
        </style>
    </head>
    <body>
        Hello world
    </body>
</html>

我尝试以某种方式根据 express.js 请求删除自定义 header，但没有成功，就像这样：

app.use((req,res,next)=>{
    //verify token
    if(req.header("test-token") === "foobarbaz"){
        res.removeHeader("text-token");
        next();
    }
})

如何在此自定义 header 上对用户进行身份验证，然后将其从 html 可能执行的进一步请求中删除（在这种情况下，加载外部网络字体）？

Answer 1

而不是 page.setExtraHTTPHeaders，考虑使用 page.setRequestInterception 以便设置额外的 header 仅用于对您的服务器的请求，而不是Google 个服务器。

如何在获取网络字体时删除自定义 header 字段？

How to remove a custom header field while fetching webfonts?

javascript

express

puppeteer