使用 node.js 提供带有 CSS 和 JS 的基本网页包括答案

【问题标题】：Using node.js to serve up basic web page with CSS and JS includes使用 node.js 提供带有 CSS 和 JS 的基本网页包括
【发布时间】：2013-07-02 22:44:54
【问题描述】：

我来自（传统的）服务器端脚本 (PHP) 背景，我正在尝试使用 Node 进行试验，看看有什么大惊小怪的。

目标：提供一个简单的网络文档，上面有一些样式表和脚本。

我的 node.js 脚本：

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

fs.readFile('index.html', function (err, html) {
    if (err) {
        throw err; 
    }       
    http.createServer(function(request, response) { 
        response.writeHeader(200, {"Content-Type": "text/html"});  
        response.write(html);  
        response.end();  
    }).listen(1337, '127.0.0.1');
});

index.html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'> 
        <title>Node.js test</title>
        <link rel="stylesheet" media="screen" type="text/css" href="css/plugin.css" />
        <link rel="stylesheet" media="screen" type="text/css" href="css/xGrid.css" />
        <link rel="stylesheet" media="screen" type="text/css" href="css/jquery-ui/jquery-ui-1.10.1.custom.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
        <script src="js/slate.js"></script>
        <script src="js/slate.portlet.js"></script>
        <script src="js/slate.message.js"></script>
        <script src="js/plugin.js"></script>
    </head>
    <body>
        <h1 class="styled-h1">Test</h1>
    </body>
</html>

我面临的问题：

这两个脚本包括来自 Google CDN 的加载到文件中的罚款。但是，从我的本地文件系统调用的所有其他样式表或脚本都被解释为text/html，因此没有预期的效果。这是来自 Google Chrome 控制台的屏幕截图：

我想了解为什么会这样。

PS：我知道我可以使用 Express 之类的框架让事情变得更简单，但我想先掌握基础知识。

【问题讨论】：

我写了一个名为 Cachemere 的模块，它可以让你做到这一点。它还会自动缓存您的所有资源。链接：github.com/topcloud/cachemere

标签： javascript html node.js mime

【解决方案1】：

您正在创建一个只做一件事且只做一件事的网络服务器无论发送什么路径或参数：它为您的 HTML 文件 index.html 提供 MIME 类型 text/html。 p>

对 CSS 文件的请求是相对路径请求，即当 Web 浏览器看到加载 css/plugin.css 的指令时，它会使用新路径调用您的 Web 服务器；但是您的 Web 服务器会忽略该路径并再次返回 index.html，MIME 类型为 text/html。您的网络浏览器抛出错误 MIME 类型的错误，但它没有告诉您的是您刚刚再次加载了 index.html。

如需自行确认，请点击以下链接：http://127.0.0.1:1337/css/plugin.css

【讨论】：

为什么这被否决了？要么这是不正确的，投反对票的人应该澄清，要么这是正确的，应该投赞成票。
这是这里唯一有用的评论。谢谢你的澄清！

【解决方案2】：

除了将 contentType 指向 text/html，您可以使用路径模块来做类似的事情

var filePath = req.url;
if (filePath == '/')
  filePath = '/index.html';

filePath = __dirname+filePath;
var extname = path.extname(filePath);
var contentType = 'text/html';

switch (extname) {
    case '.js':
        contentType = 'text/javascript';
        break;
    case '.css':
        contentType = 'text/css';
        break;
}


fs.exists(filePath, function(exists) {

    if (exists) {
        fs.readFile(filePath, function(error, content) {
            if (error) {
                res.writeHead(500);
                res.end();
            }
            else {                   
                res.writeHead(200, { 'Content-Type': contentType });
                res.end(content, 'utf-8');                  
            }
        });
    }

【讨论】：

【解决方案3】：

简单：您始终将Content-Type 标头设置为text/html。此外，它会始终为您的 index.html 文件提供服务。看：

fs.readFile('index.html', function (err, html) {
    if (err) {
        throw err; 
    }       
    http.createServer(function(request, response) { 
        response.writeHeader(200, {"Content-Type": "text/html"});  // <-- HERE!
        response.write(html);  // <-- HERE!
        response.end();  
    }).listen(1337, '127.0.0.1');
});

您应该解析 URL，查找您想要的文件，读取其内容并将其写入响应（如果存在），否则会出现 404 错误。此外，您需要设置正确的标题。

那么，你还想自己做吗？
至少，试试send 之类的东西，它是一个基本的静态文件服务器。

【讨论】：

【解决方案4】：

您的服务器正在以唯一的响应响应所有请求...当浏览器请求 CSS 和脚本时，您的服务器只做他知道的事情！！！

【讨论】：