我有一个使用PUG作为模板引擎的快递服务器。我试图使用cdn添加顺风CSS,但我得到一个cors错误,像这样:
错误:从源'http://localhost:3000'访问'https://cdn.tailwindcss.com/'的脚本已被CORS策略阻止:所请求的资源上没有'Access- control - allow - origin '标头。
在我的pug模板中,这是我的基本文件,我试图包含脚本:
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)
路由处理函数:
const tours = await Tour.find().limit(3);
res.status(200).render('homepage', {
title: 'Home',
topTours: tours
})
});
您从tailwindcss.com请求的资源不带有CORS标头。但是由于crossorigin=""
属性,浏览器期望它们。
如果省略这个属性,问题就会消失
script(src="https://cdn.tailwindcss.com" defer)
设置属性是否有特殊的原因?
下面的HTML页面可以正常加载:
<!DOCTYPE html><html>
<head>
<script type="text/javascript" src="https://cdn.tailwindcss.com" defer>
</script>
</head></html>