javascript – NodeJS无法加载css文件
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript – NodeJS无法加载css文件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2439字，纯文字阅读大概需要4分钟。
内容图文
所以我正在尝试创建一个NodeJS服务器,并尽量保留尽可能少的附加组件.
但是,我遇到了一个问题,我似乎无法加载我的HTML文件调用的任何CSS文件.呼叫似乎确实由服务器处理,但它不会在浏览器中显示.
我的webserver.js文件
// A very basic web server in node.js
// Stolen from: Node.js for Front-End Developers by Garann Means (p. 9-10)
var port = 8000;
var serverUrl = "localhost";
var http = require("http");
var path = require("path");
var fs = require("fs");
console.log("Starting web server at " + serverUrl + ":" + port);
http.createServer( function(req, res) {
var now = new Date();
var filename = req.url || "index.html";
var ext = path.extname(filename);
var localPath = __dirname;
var validExtensions = {
".html" : "text/html",
".js": "application/javascript",
".css": "text/css",
".txt": "text/plain",
".jpg": "image/jpeg",
".gif": "image/gif",
".png": "image/png",
".ico": "image/png"
};
var isValidExt = validExtensions[ext];
if (isValidExt) {
localPath += filename;
fs.exists(localPath, function(exists) {
if(exists) {
console.log("Serving file: " + localPath);
getFile(localPath, res, ext);
} else {
console.log("File not found: " + localPath);
if(ext === 'text/html'){
getFile(__dirname + '/404.html', res, ext);
}
}
});
} else {
console.log("Invalid file extension detected: " + ext)
getFile(__dirname + '/index.html', res, 'text/html');
}
}).listen(port, serverUrl);
function getFile(localPath, res, mimeType) {
fs.readFile(localPath, function(err, contents) {
if(!err) {
res.setHeader("Content-Length", contents.length);
res.setHeader("Content-Type", mimeType);
res.statusCode = 200;
res.end(contents);
} else {
res.writeHead(500);
res.end();
}
});
}
和index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>
Hello
</p>
</body>
</html>
style.css文件
p{
color: red;
}
服务器日志
$node webserver
Starting web server at localhost:8000
Serving file: c:\Users\MichaelTot\Desktop\Code Projects\Web\nodeJS/index.html
Serving file: c:\Users\MichaelTot\Desktop\Code Projects\Web\nodeJS/style.css
客户端日志
Resource interpreted as Stylesheet but transferred with MIME type text/plain: "http://127.0.0.1:8000/style.css".
解决方法:
问题出在这里：
getFile(localPath, res, ext);
你将ext赋予getFile,但是根据函数签名,你正在等待mimetype.所以你应该这样做：
getFile(localPath, res, validExtensions[ext]);
浏览器不读取css,因为默认情况下NodeJS使用text / plain mimetype.但浏览器需要一个css文件的text / css mimetype.
内容总结
以上是互联网集市为您收集整理的javascript – NodeJS无法加载css文件全部内容，希望文章能够帮你解决javascript – NodeJS无法加载css文件所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。