Mat*_*hew 12 static-files node.js mime-types 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 verify cacherm -rf node_modulesnpm installpath.join(__dirname, '/static/')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使用布局文件.
如果需要,我很乐意提供更多详细信息.
在带有express的Nodejs应用程序中，我们需要添加如下行来告诉服务器目录
app.use(express.static(__dirname));
这将解决CSS不渲染的问题
问题是文件命名不正确的结果。我们的学生在style.css文件末尾有一个空格。有一些提示，第一个是文本编辑器中缺少语法突出显示功能，第二个是文本编辑器检测到其他新创建的css文件的文件类型，但未检测到命名不正确的文件。删除空间解决了该问题。
谢谢slebetman为您指出正确方向的帮助。
这不是您问题的解决方案，但这可能会帮助像我这样寻找解决方案的人。如果您使用 app.get 如下所示：
app.get(express.static(path.join(__dirname,"public")));
将其更改为：
app.use(express.static(path.join(__dirname,"public")));
小智 5
额外提示：
我有同样的问题，但我的问题是当我尝试从一级路由器路径渲染静态文件时它工作正常
示例：site.com/posts
但是，当我尝试从site.com/posts/:id等路径渲染静态文件时，它不起作用。
解决方案是在 href 开头添加 '/' ：
错误的： <link href="css/bootstrap.min.css" rel="stylesheet">
解决方案：<link href="/css/bootstrap.min.css" rel="stylesheet">
| 归档时间： |
|
| 查看次数： |
22355 次 |
| 最近记录： |