Question

过去几天我一直有这个问题，似乎无法深究这个问题。我们正在做一个非常基本的节点/快速应用程序，并尝试使用以下内容提供静态文件：

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

这在大多数情况下都符合我的预期。我们的静态文件夹中有一些用于css和javascript的文件夹。我们正尝试使用此静态路径将CSS加载到EJS视图中：

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

当我们点击路线/时，我们会获取所有内容，但我们的CSS未加载。我们特别得到了这个错误：

拒绝申请来自＆＃39; http://localhost:3000/css/style.css＆＃39; 因为它的MIME类型（＆＃39; text / html＆＃39;）不是受支持的样式表MIME 类型，并启用严格的MIME检查。

我尝试过的事情：

清除NPM缓存/全新安装
- npm verify cache
- rm -rf node_modules
- npm install
清除浏览器缓存
对文件夹名称和对
从href
将css文件夹移动到根目录并从那里提供
从path.join(__dirname, '/static/')
有一个关于服务工作者的评论可能会在github问题报告中弄乱，并且似乎解决了很多人的问题。我们的localhost没有服务工作者：https://github.com/facebook/create-react-app/issues/658
- 我们没有使用反应，但我抓住任何可以找到的谷歌搜索

路线：

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使用布局文件。

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

Answer 1

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

谢谢slebetman帮助我指出正确的方向。

Answer 2

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

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

将其更改为：

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

Answer 3

在带有express的NOdejs应用中，我们需要添加如下代码行以告知服务器有关目录的信息

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

这将解决css无法渲染的问题

Answer 4

尽管答案与文件中的空格有关，但我还有另一个可能的答案，该答案也会生成相同的错误代码。我将其发布在此处，因为它还会引发这个引起很多关注的常见错误。

另一种选择是styles.css文件的位置错误。如果在引用位置不存在该错误，Chrome会吐出相同的错误代码。

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

如果使用VS Code，则左窗格中的文档视图具有这种怪异的视觉显示，可以使您误认为styles.css位于“ css”文件夹中，而实际上却不在。我只有在使用普通的Windows资源管理器并看到放错位置的文件后才发现问题。要进行修复，检查以及是否放错位置，只需将styles.css放在应有的位置即可。

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

Answer 5

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

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

有了这个，您的应用程序将在公共文件夹中查找静态文件。因此，假设其中有 css 和 js 文件，则可以直接在HTML中引用它们，如下所示：

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

Answer 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">

Answer 7

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

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

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

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

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

然后 express 服务器会在路径 static/css/style.css 中查找。如果这里没有文件，会抛出报错。

Node / Express - 拒绝应用样式，因为它的MIME类型（＆＃39; text / html＆＃39;）

我尝试过的事情：

路线：

视图：

package.json：

项目结构：

7 个答案: