gpt4 book ai didi

node.js - Node/Express - 拒绝应用样式,因为它的 MIME 类型为 ('text/html')

转载 作者:IT老高 更新时间:2023-10-28 23:11:23 31 4
gpt4 key购买 nike

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

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

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

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

当我们点击我们的路线 / 时,我们得到了所有的内容,但我们的 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.

我尝试过的:

  1. 清除 NPM 缓存/全新安装
    • npm 验证缓存
    • rm -rf node_modules
    • npm install
  2. 清除浏览器缓存
  3. 对文件夹名称和对文件夹名称的各种修改
  4. 在 href 中添加/删除正斜杠
  5. 将 css 文件夹移动到根目录并从那里提供服务
  6. path.join(__dirname, '/static/') 中添加/删除斜杠
  7. 在一份 github 问题报告中,有一条关于服务人员可能会搞砸事情的评论,并且似乎解决了很多人的问题。我们的本地主机没有服务 worker :https://github.com/facebook/create-react-app/issues/658
    • 我们没有使用 react,但我可以找到任何谷歌搜索

路线:

app.get("/", function(req, res) {
res.render("search");
});

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>

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

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

最佳答案

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

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

关于node.js - Node/Express - 拒绝应用样式,因为它的 MIME 类型为 ('text/html'),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48778619/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com