Node/Express - 拒绝应用样式，因为它的 MIME 类型('text/html') [英] Node/Express - Refused to apply style because its MIME type ('text/html')
问题描述
过去几天我一直遇到这个问题，但似乎无法深入了解.我们做了一个非常基本的 node/express 应用程序，并尝试使用这样的东西来提供我们的静态文件:
I've been having this issue for the past couple of days and can't seem to get to the bottom of this. We doing a very basic node/express app, and are trying to serve our static files using something like this:
app.use(express.static(path.join(__dirname, "static")));
这在很大程度上符合我的预期.我们的静态文件夹中有几个文件夹用于 css 和 javascript.我们正在尝试使用这个静态路径将我们的 css 加载到我们的 EJS 视图中:
This does what I expect it to for the most part. We have a few folders in our static folder for our css and javascript. We're trying to load our css into our EJS view using this static path:
<link rel="stylesheet" type="text/css" href="/css/style.css">
当我们点击路线 / 时，我们获得了所有内容，但我们的 CSS 没有加载.我们特别收到此错误:
When we hit our route /, we're getting all of the content but our CSS is not loading. We're getting this error in particular:
拒绝应用来自 'http://localhost:3000/css/style.css'因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME类型，并启用严格的 MIME 检查.
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.
我尝试过的:
- 清除 NPM 缓存/全新安装
npm 验证缓存rm -rf node_modulesnpm install
- 我们没有使用 React，但我正在掌握我能找到的任何谷歌搜索
路线:
app.get("/", function(req, res) {
res.render("search");
});
观点:
<!DOCTYPE html>
<html>
<head>
<title>Search for a Movie</title>
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
</head>
<body>
<h1>Search for a movie</h1>
<form method="POST" action="/results">
<label for="movie-title">Enter a movie title:</label><br>
<input id="movie-title" type="text" name="title"><br>
<input type="submit" value="Submit Search">
</form>
</body>
</html>
package.json:
{
"name": "express-apis-omdb",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "nodemon index.js",
"lint:js": "node_modules/eslint/bin/eslint.js ./ ./**/*.js --fix; exit 0",
"lint:css": "node_modules/csslint/cli.js public/css/; exit 0"
},
"license": "ISC",
"devDependencies": {
"babel-eslint": "^6.0.4",
"csslint": "^0.10.0",
"eslint": "^2.11.1",
"eslint-config-airbnb": "^9.0.1",
"eslint-plugin-import": "^1.8.1",
"eslint-plugin-jsx-a11y": "^1.3.0",
"eslint-plugin-react": "^5.1.1"
},
"dependencies": {
"body-parser": "^1.18.2",
"dotenv": "^5.0.0",
"ejs": "^2.5.7",
"express": "^4.13.4",
"morgan": "^1.7.0",
"path": "^0.12.7",
"request": "^2.83.0"
}
}
项目结构:
-app
--node_modules
--static
---img
---css
---js
--views
---movie.ejs
---results.ejs
---search.ejs
--index.js
--package-lock.json
--package.json
注意:我们目前没有为我们的 EJS 使用布局文件.
Note: We are currently not using a layout file for our EJS.
如果需要，我很乐意提供更多详细信息.
I'm happy to provide additional details if needed.
推荐答案
问题是由不正确命名的文件造成的.我们的学生在 style.css 文件的末尾有一个空格.对此有一些提示，第一个是文本编辑器中缺少语法突出显示，第二个是文本编辑器检测到其他新创建的 css 文件的文件类型，而不是名称不正确的文件.删除空间解决了问题.
The problem is the result of an improperly named file. Our student had a space at the end of the style.css file. There were a few tip offs to this, the first was a lack of syntax highlighting in the text editor, and the second was the text editor detecting the filetype for other newly created css files but not the improperly named file. Removing the space resolved the issue.
感谢 slebetman 为我指明了正确的方向.
Thank you slebetman for your help in pointing me in the right direction.
这篇关于Node/Express - 拒绝应用样式，因为它的 MIME 类型('text/html')的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
