javascript - Node JS 不提供静态图像

Question

我已经添加了在我的 Node 服务器上提供图像的代码，但是当连接到 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);

Answer 1

我在 Stack Overflow 上看到很多这样的问题，有人试图实现他们自己的静态文件服务器而不是使用 Express 或其他可用的东西，但未能使其工作。如果您可以实现自己的静态文件服务器，那就去做吧。如果你做不到，那么这应该是一个迹象，表明这可能不是一个好主意。 更新:请参阅下文了解没有 Express 的解决方案。

问题

只要看一眼你的代码，我就已经发现了几个严重的问题，包括:

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

2. 您的代码阻塞 - 一旦您获得任何并发连接，它就会逐渐停止。

3. 您的代码不适用于二进制文件 - 仅适用于文本文件，并且仅适用于具有 UTF-8 编码的文件

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

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

6. 当文件不存在时您的代码崩溃而不是用正确的代码响应

解决方案

任何回答此类问题的人都有两个选择:要么投入大量精力和时间来解决上述每一个问题(这种情况很少发生，因为这不是一项微不足道的任务，这就是为什么你看到的都是评论提及其中一两个问题而不是答案)或您可以解释应该如何正确完成任务，而不是对一开始就不是好主意的事情添加无数的修复。

话虽如此，要以安全和高效的方式实现您的目标，您可以做的是将您的静态文件(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 上查看完整示例和解释:

• https://github.com/rsp/node-express-static-example

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

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

• http://expressjs.com/en/4x/api.html

其他选项

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

• koa , Restify , Hapi , Sails , LoopBack和 more .

没有框架

如果您仍然认为您不想使用能够正确完成工作的高级框架，并且您想推出自己的解决方案，也许出于教育目的，请查看此答案:

• How to serve an image using nodejs

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

1. express.static(express 内置中间件，就像这个答案)
2. express(express 但没有 express.static)
3. connect(比express低一级)
4. http(使用 Node 的 http 模块)
5. net(甚至不使用 http 模块)

发布的所有示例都经过测试并适用于 Node 版本 4、5、6 和 7。

其他相关回答:

• How to serve an image using nodejs
• Failed to load resource from same directory when redirecting Javascript
• onload js call not working with node
• Sending whole folder content to client with express
• Loading partials fails on the server JS