7

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

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

我的 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');
});

索引.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 这样的框架让事情变得更简单，但我想先掌握基础知识。

4

4 回答 4

9

很简单：您总是将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之类的东西，它是一个基本的静态文件服务器。

于 2013-07-04T22:13:09.150 回答
8

而不是将 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');                  
            }
        });
    }
于 2014-06-17T09:48:51.027 回答
2

您正在创建一个 Web 服务器，它只做一件事和一件事，而与发送的路径或参数无关：它为您的 HTML 文件index.html提供 MIME 类型text/html。

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

要自己确认，请单击以下链接：http://127.0.0.1:1337/css/plugin.css

于 2013-07-04T22:07:11.453 回答
0

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

于 2013-07-04T22:07:00.890 回答