我无意中发现了一个CORS错误,当时我试图从Google获取一个字体。
我目前有一个express.js服务器为傀儡机器人提供html文件。我需要通过使用自定义标头字段来验证发送请求到此服务器的用户。但是,当html文件从Google获取字体时,它使用该自定义标头,请求失败时会出现以下错误:
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);
})()加载了web字体的示例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请求中的自定义标头,但没有得到任何结果,如下所示:
app.use((req,res,next)=>{
//verify token
if(req.header("test-token") === "foobarbaz"){
res.removeHeader("text-token");
next();
}
})如何在这个自定义标头上对用户进行身份验证,然后从html可能做的进一步请求中删除它(在本例中是加载外部webfonts)?
发布于 2022-06-01 18:43:31
而不是page.setExtraHTTPHeaders,考虑使用page.setRequestInterception来设置额外的标题,只针对您的服务器的请求,而不是谷歌服务器。
https://stackoverflow.com/questions/72464512
复制相似问题