I have an express server which uses the PUG as a template engine. I am trying to add tailwind CSS using the cdn but I'm getting a cors error like this:
Error: Access to script at 'https://cdn.tailwindcss.com/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
In my pug template this is my base file where I m trying to include the 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)
My route handler function:
const tours = await Tour.find().limit(3);
res.status(200).render('homepage', {
title: 'Home',
topTours: tours
})
});
The resource that you request from tailwindcss.com does not come with CORS headers. But because of the crossorigin="" attribute, the browser expects them.
The problem goes away if you omit this attribute
script(src="https://cdn.tailwindcss.com" defer)
Is there a particular reason why you set the attribute?
The following HTML page loads without problems:
<!DOCTYPE html><html>
<head>
<script type="text/javascript" src="https://cdn.tailwindcss.com" defer>
</script>
</head></html>