节点/表达-拒绝应用样式，因为它的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 verify cache -
rm -rf node_modules -
npm install
-
- Clear NPM Cache / Fresh Install
npm verify cacherm -rf node_modulesnpm install
- 我们没有使用react，但我正在抓紧我能找到的所有Google搜索
路线:
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.
这篇关于节点/表达-拒绝应用样式，因为它的MIME类型('text/html')的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
