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

提问者：小点点

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

这几天我一直有这个问题，似乎无法弄清楚这件事的真相。我们做了一个非常基本的Node/Express应用程序，并尝试使用以下内容为我们的静态文件提供服务：

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验证缓存
rm-rf node_modules
NPM安装

我们没有使用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>

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

如果需要的话，我很乐意提供更多的细节。

共1个答案

匿名用户

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

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