Javascript node.js可以很好地加载html，但不会加载关联的css_Javascript_Html_Css_Node.js

Javascript node.js可以很好地加载html，但不会加载关联的css

javascript html css node.js

Javascript node.js可以很好地加载html，但不会加载关联的css,javascript,html,css,node.js,Javascript,Html,Css,Node.js,我在使用javascript加载index.html文件时遇到了问题（我很确定这可能是javascript中第五容易做到的事情）我会尽量保持简短；基本上，当我手动打开index.html时，它可以很好地加载css（如下图所示）但是，当我使用javascript加载它时，它只加载带有默认格式的纯html，而不加载css：这些文件的位置如下：根目录中的server.js 中的index.html:root/public 中的style.css:root/public/css server

我在使用javascript加载index.html文件时遇到了问题（我很确定这可能是javascript中第五容易做到的事情）

我会尽量保持简短；基本上，当我手动打开index.html时，它可以很好地加载css（如下图所示）

但是，当我使用javascript加载它时，它只加载带有默认格式的纯html，而不加载css：

这些文件的位置如下：

根目录中的server.js

中的index.html:root/public

中的style.css:root/public/css

server.js

var http = require('http');
var fs = require('fs');

var handleRequest = function handleRequest(request, response){
        if (request.url==='/index.html' || request.url==='/') {
            response.writeHeader(200, {'Content-type':'text/html'});
            fs.readFile('./public/index.html', function (err, file) {
                if (err) throw err;
                response.end(file);
            });
        } else {
            response.writeHeader(404);
            response.end('Are you lost friend?');
        }
}
var server = http.createServer(handleRequest);
var PORT = 8080; 
server.listen(PORT, function(){
    console.log("Server listening on: http://localhost:%s", PORT);
});

index.html

<!DOCTYPE html>
<html>
<head>
    <title>My not-so-amazing Webpage</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<h1>The Inspiratorator v5.7.0</h1>

<p>I AM THE SUN</p>

</body>
</html>

除非uri以index.html结尾，否则您实际上返回的是HTTP404，那么css怎么能像这样服务呢

使用Chrome或Firebug中的适当调试器来查找此类错误的原因

看看您是如何处理请求的，基本上您拒绝了除

之外的所有请求。浏览器无法访问css文件

if (request.url==='/index.html' || request.url==='/') {
            response.writeHeader(200, {'Content-type':'text/html'});
            fs.readFile('./public/index.html', function (err, file) {
                if (err) throw err;
                response.end(file);
            });
        } else {
            response.writeHeader(404);
            response.end('Are you lost friend?');
        }

在这里，我为css文件添加了一个例外，它可以正常工作

注意：

您应该更改此代码以满足您的需要，不要在生产中使用

} else if (request.url.indexOf('css') != -1) {
            response.writeHeader(200, {'Content-type':'text/css'});
            fs.readFile('./public/css/style.css', function (err, file) {
                if (err) throw err;
                response.end(file);
            });
        }

这是node.js吗？你可能想在标签和文本中提到这一点；为了确保我正确地理解了代码，检查css内容的内部（if（request.url=='/index.html'| | request.url==='/'）然后读取文件是否有效？有没有办法通过HTML文档中指定的路径读取文件，或者我必须手动声明它？（或者设置某种命名约定，例如，stylethispage.css for thispage.html）哦，没关系，那没用，我想我明白为什么了——我很确定我误解了页面的加载方式。当用户请求html页面（javascript得到它）时，html页面将自己请求css文件，而css文件不会被发送，因为它只是默认为404；是这样吗？对于是否有一种“正确”的方法来做到这一点，仍然有点困惑，可能是通过从html页面或其他地方获取“发送”的文件？（仍然不能100%肯定它的工作原理）@OmarA.Yousry是的HTTP就是这样工作的。正确的方法是使用更高级别的东西，可能是

express.js

？啊，好吧，我一定会调查的。非常感谢！

} else if (request.url.indexOf('css') != -1) {
            response.writeHeader(200, {'Content-type':'text/css'});
            fs.readFile('./public/css/style.css', function (err, file) {
                if (err) throw err;
                response.end(file);
            });
        }