Node JS 使用 css 提供 html 文件

【问题标题】：Node JS serving html file with cssNode JS 使用 css 提供 html 文件
【发布时间】：2019-03-03 08:03:10
【问题描述】：

我正在练习纯节点 js，并且我遇到了一件对 http 协议感到不安的事情。经过一个小时左右的搜索和测试我的代码后，我终于用 css 为我的 html 页面提供了服务。这是我的代码：

const server = http.createServer((req, res)=>{
if(req.url === "/"){
    fs.readFile("index.html", "UTF-8", function(err, data){
        res.writeHead(200, {"Content-Type": "text/html"});
        res.end(data);
    });
}else if(req.url === "/styles.css")){
    var cssPath = path.join(__dirname, 'public', req.url);
    var fileStream = fs.createReadStream(cssPath, "UTF-8");
    res.writeHead(200, {"Content-Type": "text/css"});
    fileStream.pipe(res);
};
});

但我不明白它为什么有效。好吧，我只在浏览器中输入了“/”，没有输入“/styles.css”。以及为什么我在 URL 栏中看不到“/styles.css”。我确定这是因为 http 协议是如何设计的，但是你能帮忙解释一下这个协议吗？提前谢谢你。

【问题讨论】：

你有一个错字！ ... else if(req.url == "/styles.css")) 中的第二个右括号是多余的！
哦，谢谢，我换代码的时候没注意

标签： html css node.js http

【解决方案1】：

如果您在地址栏中输入了/styles.css，那么您将看到 CSS 文件的源代码。例如：this link。

您输入/，然后浏览器要求服务器输入/，服务器以HTML 文档响应。

然后浏览器呈现 HTML 文档。我假设 HTML 文档包含以下内容：

<link rel=stylesheet href=/styles.css>

因此，浏览器向服务器请求/styles.css，服务器以 CSS 文件响应。然后浏览器将该 CSS 应用于 HTML 文档。

地址栏中没有显示/styles.css，因为您正在查看/。 CSS 文件只是完全呈现 / 所代表的 HTML 文档所需的不同资源。

【讨论】：