Fatal编程技术网
  • javascript/
  • Javascript NodeJS可以'；无法加载css文件

Javascript NodeJS可以'；无法加载css文件

javascript html css node.js

Javascript NodeJS可以'；无法加载css文件,javascript,html,css,node.js,Javascript,Html,Css,Node.js,因此，我正在尝试制作一个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

因此，我正在尝试制作一个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>

服务器日志

$ 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".

客户端日志

$ 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，因为默认情况下NodeJ使用
text/plain
mimetype。但是浏览器需要css文件的
text/css
mimetype。

日志显示了什么？刚刚添加了日志^does
http://127.0.0.1:8000/style.css
包含查看时所需的内容？请尝试此
res.setHeader（“内容类型”、“文本/html”）（您可能还需要查看express框架、hapi或类似的东西）