javascript - 拒绝应用来自 'http://localhost:3000/css/style.css' 的样式,因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型
问题描述
我只是在创建一个示例网站模板,并在 Chrome 控制台中收到此错误:
Refused to apply style from 'http://localhost:3000/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
尝试加载 css/style.css 页面时出现 404 错误,但路径似乎正确。以下是该网站的一些基本代码:
应用程序:
var express = require('express');
var app = express();
var exphbs = require('express-handlebars');
var path = require('path');
app.engine('hbs', exphbs({extname:'hbs'}));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');
app.use(express.static(path.join(__dirname, "static")));
app.get('/', function(req, res) {
res.render('resume.hbs')
})
app.listen(3000)
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<base href="/">
<link rel="stylesheet" href="..\css\style.css" type = "text/css">
<title>Example Website</title>
<h1>Header</h1>
<hr id = 'headerBorder'>
</head>
<body>
</body>
</html>
CSS:
h1 {
color: blue
}
下面是文件夹的样子,其中显示了路径。我似乎找不到解决此问题的方法。有任何想法吗?
解决方案
这可能只是由于没有预期的路径造成的。
你在这里使用这条线:
app.use(express.static(path.join(__dirname, "static")));
所以在这种情况下,您需要一个名为“static”的文件夹,并且在该文件夹中您可以放置您的 css 和图像。您可以按如下方式链接到它们:
<link rel="stylesheet" href="/css/style.css" type="text/css">
推荐阅读
- android - 当文本编辑字段获得焦点时,Android Webview 不显示键盘
- sql - 如何在redshift中合并行
- azure-devops - 代码搜索 - 搜索特定打字稿功能时排除打字
- docker - 本地 kubeadm K8S 访问私有 gcr.io
- internet-explorer - 在 Internet Explorer 中显示警报时,Selenium 代码不会移动到下一行
- java - 在拦截器中访问 Spring 的 RequestEntity
- python - Pandas 数据框仅将最后一行写入 .csv
- iis - 在 IIS 应用程序池中更改身份后没有 SSO
- gulp - gulp 与 gulp-sequence 包失败
- c# - 使用外部定义类型的 CSharpScript - 无法从类型 A 转换为 A