logo标签列表

使用node.js提供基本网页，并包含CSS和JS。

javascripthtmlnode.jsmime
7

我是一名传统的服务器端脚本(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 这样的框架使事情更容易，但我想先掌握基础知识。
1
我写了一个叫做Cachemere的模块，可以让你轻松实现这个功能。它还会自动缓存所有资源。链接：https://github.com/topcloud/cachemere - Jon
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 这样的东西，它是一个基本的静态文件服务器。
8
相比将contentType指向text/html，您可以使用path模块执行以下操作：
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');                  
            }
        });
    }
2
你正在创建一个网络服务器，无论发送的路径或参数如何，它只执行一项任务：使用 MIME 类型为 text/html，提供你的 HTML 文件 index.html。
对于 CSS 文件的请求是相对路径请求，也就是说，当网页浏览器看到加载 css/plugin.css 的指令时，会向你的网络服务器发送新路径的请求；但你的网络服务器会忽略该路径，只是再次返回 MIME 类型为 text/html 的 index.html。你的网页浏览器会提示错误的 MIME 类型，但它没告诉你实际上已经重新加载了 index.html。
要自行确认，请单击以下链接：http://127.0.0.1:1337/css/plugin.css
为什么这被踩了？要么是信息有误，踩的人需要澄清；要么信息正确，应该点赞。 - mickey
这是这里唯一有用的评论。感谢您的澄清！ - Kafeaulait
0

你的服务器对所有请求都响应相同的内容... 当浏览器请求CSS和脚本时，你的服务器只会做它所知道的事情!!!

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接