Tengo un servidor express que usa el PUG como motor de plantillas. Estoy tratando de agregar CSS de viento de cola usando el cdn pero recibo un error cors como este:
Error: el acceso a la secuencia de comandos en 'https://cdn.tailwindcss.com/' desde el origen 'http://localhost:3000' ha sido bloqueado por la política CORS: No hay encabezado 'Access-Control-Allow-Origin' presente en el recurso solicitado.
En mi plantilla pug, este es mi archivo base donde intento incluir el script:
html head block head meta(charset='UTF-8') meta(name='viewport' content='width=device-width, initial-scale=1.0') link(rel='stylesheet' href='/css/style.css') link(rel='shortcut icon' type='image/png' href='/img/favicon.png') link(rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:300,300i,700') title A & N Tours | #{title} body // HEADER include _header // CONTENT block content h1 This is a placeholder heading // FOOTER include _footer script(src="https://js.stripe.com/v3/" crossorigin="") script(src='/js/bundle.js') script(src="https://cdn.tailwindcss.com" crossorigin="" defer)Mi función de controlador de ruta:
const tours = await Tour.find().limit(3); res.status(200).render('homepage', { title: 'Home', topTours: tours }) });El recurso que solicita de tailwindcss.com no viene con encabezados CORS. Pero debido al crossorigin="" , el navegador los espera.
El problema desaparece si omites este atributo.
script(src="https://cdn.tailwindcss.com" defer)¿Hay alguna razón en particular por la que establece el atributo?
La siguiente página HTML se carga sin problemas:
<!DOCTYPE html><html> <head> <script type="text/javascript" src="https://cdn.tailwindcss.com" defer> </script> </head></html>