在Node JS Pug模板中包含脚本时出现CORS错误



我有一个使用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>

最新更新