将 css 文件链接到 node.js 服务器答案

【问题标题】：Linking css files to node.js server将 css 文件链接到 node.js 服务器
【发布时间】：2014-06-17 23:11:52
【问题描述】：

所以我创建了一个带有两条路由的 node.js 服务器。我使用 fs 从视图文件夹中获取 html 文件，然后将它们附加到页面。在那些 html 文件中，我有一个指向 css 文件的正常链接，这似乎不起作用。这是我的 node.js 应用程序：

var port = 1357;

var http = require('http'),
    path = require('path'),
    mime = require('mime'),
    fs = require('fs');

var app = http.createServer( function(req, res) {

    if (req.url === '/home') {
        fs.readFile('views/index.html', function(err, page) {
            res.writeHead(200, {'Content-Type': 'text/html'});
            res.write(page);
            res.end();
        });
    }

    else if (req.url === '/about') {
        fs.readFile('views/about.html', function(err, page) {
            res.writeHead(200, {'Content-Type': 'text/html'});
            res.write(page);
            res.end();
        });
    }

        else {
            res.writeHead(301,
              {Location: '/home'}
            );
            res.end();
        }
});



app.listen(port);
console.log('Server running on port: ' + port)

在我拥有的 html 文件中：

<link rel="stylesheet" type="text/css" href="./styles/styles.css">

它不起作用。在 chrome 的控制台中，我得到“资源解释为样式表，但使用 MIME 类型 text/html 传输。”

【问题讨论】：

您真正缺少的是静态文件的静态路由，但是您使用 catch all 路由设置服务器的方式，然后使用 if/else 语句检查 URL 似乎有些复杂和刚性。我建议看看 Express。

标签： javascript html css node.js

【解决方案1】：

您定义了 2 条路线：/home 和 /about。您还定义了除了这两个路由之外的任何东西都应该默认为 HTTP 重定向到 /home 路由，这就是导致问题的原因。

当浏览器遇到指向 css 文件的链接时，它会请求以下 URL：/styles/styles.css。服务器接收到这个 URL，由于它与两个定义的路由不匹配，它会进入 else 语句，该语句将重定向到 /home，所以你的浏览器，请求一个 css 文件，将只接收位于的 html 页面/home。

要解决此问题，您可能需要为您的 css 文件添加新规则：

else if (req.url === '/styles/styles.css') { fs.readFile('styles/styles.css', function(err, page) { res.writeHead(200, {'Content-Type': 'text/css'}); res.write(page); 重发（）; }); }

当然，如果你有更多的 css 文件，你需要管理一个特定的文件夹而不是文件。我想您这样做是为了学习 Node，因为如果您不这样做，您可能想要使用 express，它是一个可随时使用的 Node 网络服务器，可以为您节省大量时间。

【讨论】：

非常感谢！是的，我知道一些关于快递的事情，但一切都已经为我做好了。正如你所猜测的，我是 node 的初学者，所以我现在所做的一切都只是练习

【解决方案2】：

当客户端（浏览器）向服务器请求/styles/styles.css 时，服务器会响应301 Moved Permanently 和Location: '/home'。

然后浏览器请求/home 并获得一个HTML 文档，它不是样式表。

您必须在浏览器请求时将样式表提供给它。

【讨论】：

【解决方案3】：

静态资产（如在您的样式表中）不会自动提供。所以发生的情况是，它通过了 301 重定向并降落到 /home，您在其中提供 text/html。如果您想以这种方式提供 css，请添加规则 req.url==="/styles/styles.css"

一般来说，我建议使用express 或koa 之类的路由库。或者至少，connect。它们使挂钩称为中间件的功能变得容易，并使您能够使目录中的所有内容（如 /public）都使用一条规则提供静态内容。

【讨论】：