node.js Node/Express - 拒绝应用样式，因为它的 MIME 类型（'text/html'）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48778619/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Node/Express - Refused to apply style because its MIME type ('text/html')
提问by Matthew
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:
过去几天我一直有这个问题，似乎无法深入了解。我们做了一个非常基本的 node/express 应用程序，并尝试使用这样的东西来提供我们的静态文件：
app.use(express.static(path.join(__dirname, "static")));
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:
这在很大程度上符合我的预期。我们的静态文件夹中有几个文件夹用于 css 和 javascript。我们正在尝试使用以下静态路径将我们的 css 加载到我们的 EJS 视图中：
<link rel="stylesheet" type="text/css" href="/css/style.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:
当我们点击 route 时/，我们获得了所有内容，但我们的 CSS 没有加载。我们特别收到此错误：
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.
拒绝应用来自 ' http://localhost:3000/css/style.css' 的样式，因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。
What I've tried:
我试过的：
- Clear NPM Cache / Fresh Install
npm verify cacherm -rf node_modulesnpm install
- Clear Browser Cache
- Various modifications to folder names and references to that
- Adding/removing forward slashes form the href
- Moving the css folder into the root and serving it from there
- Adding/removing slashes from
path.join(__dirname, '/static/') - There was a comment about a service worker possibly messing things up in a github issue report, and seemed to fix a lot of people's problems. There is no service worker for our localhost: https://github.com/facebook/create-react-app/issues/658
- We're not using react, but I'm grasping at any google search I can find
- 清除 NPM 缓存/全新安装
npm verify cacherm -rf node_modulesnpm install
- 清除浏览器缓存
- 对文件夹名称及其引用的各种修改
- 从 href 添加/删除正斜杠
- 将 css 文件夹移动到根目录并从那里提供服务
- 添加/删除斜线
path.join(__dirname, '/static/') - 在 github 问题报告中有一个关于 service worker 可能把事情搞砸的评论，并且似乎解决了很多人的问题。我们的本地主机没有 Service Worker：https: //github.com/facebook/create-react-app/issues/658
- 我们没有使用反应，但我正在掌握我能找到的任何谷歌搜索
The route:
路线：
app.get("/", function(req, res) {
res.render("search");
});
The view:
风景：
<!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>
The package.json:
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"
}
}
The project structure:
项目结构：
-app
--node_modules
--static
---img
---css
---js
--views
---movie.ejs
---results.ejs
---search.ejs
--index.js
--package-lock.json
--package.json
Note:We are currently not using a layout file for our EJS.
注意：我们目前没有为我们的 EJS 使用布局文件。
I'm happy to provide additional details if needed.
如果需要，我很乐意提供其他详细信息。
采纳答案by Matthew
The problem is the result of an improperly named file. Our student had a space at the end of the style.cssfile. 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.
问题是由不正确命名的文件造成的。我们的学生在style.css文件末尾有一个空格。对此有一些提示，第一个是文本编辑器中缺少语法突出显示，第二个是文本编辑器检测其他新创建的 css 文件的文件类型，而不是名称不正确的文件。删除空间解决了问题。
Thank you slebetman for your help in pointing me in the right direction.
感谢 slebetman 帮助我指出正确的方向。
回答by Surekha K
In NOdejs app with express we need to add the line like below to tell the server about the directory
在带有 express 的 NOdejs 应用程序中，我们需要添加如下所示的行来告诉服务器有关目录的信息
app.use(express.static(__dirname));
This will solve the problem of css not rendering
这将解决css不渲染的问题
回答by user3507825
Though the answer has to do with a space in the file, I have another potential answer that also generates the same error code. I'm posting it here as it also brings up this common error that gets a lot of looks.
虽然答案与文件中的空格有关，但我还有另一个潜在的答案，它也会生成相同的错误代码。我把它张贴在这里，因为它也带来了这个常见的错误，引起了很多人的注意。
The alternative is the misplacement of the styles.css file. If it is not present where it is referenced, Chrome will spit out the same error code.
另一种选择是styles.css 文件的错位。如果它在引用的地方不存在，Chrome 将吐出相同的错误代码。
I've had an instance of the styles.css being in an express js's "public" folder but not in the actual "css" sub-folder in "public." (public was used as the static folder.)
我有一个 style.css 的实例在 express js 的“public”文件夹中，但不在“public”的实际“css”子文件夹中。（public 被用作静态文件夹。）
If you use VS Code, your document view in the left pane has this weird visual display that can fool you into thinking the styles.css is in the "css" folder when in fact it is not. I only discovered the issue after using normal windows explorer and seeing the missplaced file. To fix, check and if missplaced, just put styles.css where it should be.
如果您使用 VS Code，则左窗格中的文档视图会出现这种奇怪的视觉显示，这可能会让您误以为 style.css 位于“css”文件夹中，而实际上并非如此。我只是在使用普通的 Windows 资源管理器并看到错放的文件后才发现这个问题。要修复，检查，如果放错了位置，只需将 style.css 放在它应该在的位置。
Hope this helps others too!
希望这对其他人也有帮助！
回答by Ajay
This is not a solution for your question but this might help someone else searching for solution like me. if you use app.get like below:
这不是您问题的解决方案，但这可能会帮助其他人像我一样寻找解决方案。如果您使用 app.get 如下所示：
app.get(express.static(path.join(__dirname,"public")));
change it to :
将其更改为：
app.use(express.static(path.join(__dirname,"public")));
