Node/Express - 拒绝应用样式，因为它的 MIME 类型（'text/html'）答案

【问题标题】：Node/Express - Refused to apply style because its MIME type ('text/html')Node/Express - 拒绝应用样式，因为它的 MIME 类型（'text/html'）
【发布时间】：2018-07-24 12:29:25
【问题描述】：

过去几天我一直遇到这个问题，但似乎无法解决这个问题。我们正在做一个非常基本的节点/快递应用程序，并尝试使用以下方式提供我们的静态文件：

app.use(express.static(path.join(__dirname, "static")));

这在很大程度上符合我的预期。我们的静态文件夹中有几个文件夹用于我们的 css 和 javascript。我们正在尝试使用这个静态路径将我们的 css 加载到我们的 EJS 视图中：

<link rel="stylesheet" type="text/css" href="/css/style.css">

当我们到达我们的路线/ 时，我们得到了所有的内容，但我们的 CSS 没有加载。我们特别收到了这个错误：

拒绝应用来自“http://localhost:3000/css/style.css”的样式因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并启用严格的 MIME 检查。

我尝试过的：

清除 NPM 缓存/全新安装
- npm verify cache
- rm -rf node_modules
- npm install
清除浏览器缓存
对文件夹名称和对文件夹名称的各种修改
在 href 中添加/删除正斜杠
将 css 文件夹移动到根目录并从那里提供服务
在path.join(__dirname, '/static/') 中添加/删除斜线
在 github 问题报告中有一条关于服务人员可能会搞砸事情的评论，并且似乎解决了很多人的问题。我们的本地主机没有服务工作者：https://github.com/facebook/create-react-app/issues/658
- 我们没有使用 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 使用布局文件。

如果需要，我很乐意提供更多详细信息。

【问题讨论】：

您所做的所有调试步骤都假设浏览器没有接收到 css 文件（您假设路径有问题）。但实际上恰恰相反——浏览器接收到 css 文件但拒绝将其视为 css。您可以通过尝试直接在浏览器中打开 css URL 来验证这一点（它应该显示您的 css 源代码）。相反，express.static 将 css 文件作为 html its MIME type ('text/html') 提供服务。从那里调试
谷歌看看 express.static 如何确定文件类型
我不会把我的 cmets 作为答案，因为我知道问题是什么，但不知道解决方案。你得想办法解决
你的静态路由器是什么样子的，你有没有尝试使用express.static？
感谢大家的意见，特别是 slebetman。学生在 css 文件 /style.css 的末尾有一个空格。我应该从 css 文件中缺少语法高亮注意到这一点。

标签： node.js express mime-types static-files

【解决方案1】：

问题是文件命名不正确的结果。我们的学生在style.css 文件的末尾有一个空格。对此有一些提示，第一个是文本编辑器中缺少语法突出显示，第二个是文本编辑器检测其他新创建的 css 文件的文件类型，但没有检测到不正确命名的文件。删除空格解决了这个问题。

感谢 slebetman 帮助我指明了正确的方向。

【讨论】：

【解决方案2】：

在带有 express 的 Nodejs 应用程序中，我们需要添加如下行来告诉服务器目录

app.use(express.static(__dirname));

这样就解决了CSS不渲染的问题

【讨论】：

我已经有好几年没有考虑这个问题了，但是我的问题的正确答案是什么？这是由几个不同来源引起的模棱两可的节点错误消息。其他人会有不同的原因，需要不同的解决方案。我很高兴每个人都在分享他们的解决方案，并且人们正在寻找他们需要的帮助。但最初的问题是 css 文件命名不正确。我不知道 node/express 是否会纠正我遇到的文件类型问题，但如果是这种情况，我会更新答案。

【解决方案3】：

这不是您问题的解决方案，但这可能会帮助其他人像我一样寻找解决方案。如果你像下面这样使用 app.get：

app.get(express.static(path.join(__dirname,"public")));

改成：

app.use(express.static(path.join(__dirname,"public")));

【讨论】：

【解决方案4】：

OP 已针对他的场景发布了解决方案。

对于其他人，当节点服务器找不到样式表时会出现此错误 app.use() 中间件内指定路径中的文件（或任何文件）。示例：

app.use(express.static(path.join(__dirname, "static")));

当您使用上述中间件时，快速服务器会从此（在本例中为静态/）目录搜索文件。如果您将样式表路径指定为：

<link rel="stylesheet" type="text/css" href="/css/style.css">

然后express服务器会在路径static/css/style.css中查找。如果文件不在此处，则会抛出报告的错误。

【讨论】：

【解决方案5】：

虽然答案与文件中的空格有关，但我还有另一个可能的答案，它也会生成相同的错误代码。我把它贴在这里，因为它也带来了这个常见的错误，得到了很多关注。

另一种选择是样式.css 文件的错位。如果它在被引用的地方不存在，Chrome 会吐出相同的错误代码。

我有一个 styles.css 实例位于 express js 的“public”文件夹中，但不在“public”中的实际“css”子文件夹中。（public被用作静态文件夹。）

如果你使用 VS Code，你在左窗格中的文档视图会出现这种奇怪的视觉显示，让你误以为 styles.css 位于“css”文件夹中，而实际上并非如此。我只是在使用普通的 Windows 资源管理器并看到放错位置的文件后才发现这个问题。要修复、检查，如果放错了位置，只需将 styles.css 放在应有的位置即可。

希望这对其他人也有帮助！

【讨论】：

你是救生员！

【解决方案6】：

额外提示：

我也有类似的问题，但我的问题是当我尝试从一级路由器路径渲染静态文件时，它工作正常

示例：site.com/posts

但是当我尝试从 site.com/posts/:id 之类的路由渲染静态文件时，它不起作用。

解决方案是在 href 开头添加“/”：

错误：<link href="css/bootstrap.min.css" rel="stylesheet">

解决方案 :<link href="/css/bootstrap.min.css" rel="stylesheet">

【讨论】：

不敢相信我花了 1 个小时试图找出路由页面的样式关闭的原因！谢谢！

【解决方案7】：

我今天遇到了同样的问题。我的文件结构是这样一种方式，即所有静态文件的每个文件夹都在 public 文件夹中。公共文件夹本身位于根目录中。我尝试使用相对路径，例如 ../public/css/index.css 等，但没有运气。这就是我所做的。

const app = express();
app.use(express.static("public"));

这样，您的应用将在公共文件夹中查找静态文件。所以假设你有 css 和 js 文件，你可以直接在 HTML 中引用它们，如下所示：

href="css/index.css"
src="js/script.js"

【讨论】：