Me encontré con un error de CORS al intentar obtener una fuente de Google.
Actualmente tengo un servidor express.js que sirve archivos html para bots titiriteros. Necesito autenticar a los usuarios que envían solicitudes a este servidor mediante un campo de encabezado personalizado. Sin embargo, cuando el archivo html obtiene una fuente de Google, usa ese encabezado personalizado y la solicitud falla con el siguiente error:
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.Repliqué el problema en un script mucho más pequeño a continuación:
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); })()Mi archivo HTML de muestra con fuentes web cargadas:
<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>Intenté de alguna manera eliminar el encabezado personalizado en la solicitud express.js pero sin suerte, así:
app.use((req,res,next)=>{ //verify token if(req.header("test-token") === "foobarbaz"){ res.removeHeader("text-token"); next(); } })¿Cómo autentico a los usuarios en este encabezado personalizado pero luego lo elimino de otras solicitudes que html podría hacer (en este caso, para cargar fuentes web externas)?
En lugar de page.setExtraHTTPHeaders , considere usar page.setRequestInterception para configurar el encabezado adicional solo para las solicitudes a su servidor, no a los servidores de Google.