节点JS不提供静态图像

时间:2016-11-28 04:49:10

标签: javascript html node.js static-files

我已经在节点服务器上添加了用于提供图像的代码,但在连接到Node时似乎没有在HTML中提供图像。我还有正确提供的外部CSS和JS。这是Node中代码的片段(见下文)。提前谢谢!

var server = http.createServer(function(req, res) {
    var pathname = url.parse(req.url).pathname;
    var ext = path.extname(pathname);
    var handler = handlers[req.url];
    if(ext) {
        if(ext === ".css"){
            res.writeHead(200, { "Content-Type" : "text/css" });
        }
        else if(ext === ".js") {
            res.writeHead(200, { "Content-Type" : "text/javascript" });
        }
        else if(ext === ".jpg") {
            res.writeHead(200, { "Content-Type" : "image/jpg" });
        }
        res.write(fs.readFileSync(__dirname + pathname, "utf8"));
        res.end();
    }
    else if(handler) {
        handler(req, res);
    }
    else {
        res.writeHead(404, { "Content-type" : "text/plain" });
        res.end();
    }
});
server.listen(80);

1 个答案:

答案 0 :(得分:6)

当有人试图实现他们自己的静态文件服务器而不是使用Express或者有效的东西时,我在Stack Overflow上看到了很多这样的问题,并且无法使其工作。如果您可以实现自己的静态文件服务器,那么就这样做。如果你不能,那么它应该是一个标志,也许这不是一个好主意。 更新:请参见下面没有Express的解决方案。

问题

只是看了一下你的代码,我已经看到了几个严重的问题,包括:

  1. 您的代码不安全 - 它允许任何人获取您系统上的任何文件。

  2. 您的代码阻止 - 只要您获得并发连接,它就会停止运行。

  3. 您的代码不适用于二进制文件 - 仅适用于文本文件,只适用于使用UTF-8编码的文件

  4. 您的代码不适用于大写文件名.jpeg扩展程序等。

  5. 您的代码无法正确提供 HTML 文件

  6. 当文件不存在而不是使用正确的代码回复时,您的代码崩溃

  7. 解决方案

    任何回答这样一个问题的人都有两个选择:要么花费大量的精力和时间来解决上面提到的每一个问题(这很少发生,因为这不是一项微不足道的任务,而且这就是为什么所有你看到的评论中提到了一两个问题,而不是答案)你可以解释如何正确完成任务,而不是首先在一些不好的想法上添加无数的修复

    有人说过,你可以用安全和高效的方式来实现你的目标,就是把你的静态文件(HTML,CSS,图像等)放到一个目录中,例如:调用html并使用Express(或其他一些框架,见下文),使用如下简单代码:

    var path = require('path');
    var express = require('express');
    var app = express();
    
    var htmlPath = path.join(__dirname, 'html');
    
    app.use(express.static(htmlPath));
    
    var server = app.listen(80, function () {
        console.log('listening on port', server.address().port);
    });
    

    请参阅完整示例并在GitHub上解释:

    我把这个例子放在GitHub上,因为Stack Overflow上有很多关于人们在Node中提供静态文件的问题。它是开源的,您可以根据自己的需要进行调整,并在代码中使用。

    有关Express的更多信息,请参阅:

    其他选项

    可用于提供静态文件的其他框架包括:

    没有框架

    如果你仍然认为你不想使用能够正确完成工作的高级框架,而你想推出自己的解决方案,也许是出于教育目的,那么请看看这个答案:

    它解释了如何使用以下方式提供静态图像:

    1. express.staticexpress内置中间件,如此答案)
    2. expressexpress但没有express.static
    3. connect(比express低一级)
    4. http(使用Node' s http模块)
    5. net(甚至不使用http模块)
    6. 所有发布的示例都经过测试,可以在Node版本4,5,6和7上使用。

      其他相关答案: