Question

所以我用一条带有两条路线的node.js服务器。我使用fs从views文件夹中获取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进行传输。”

Answer 1

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

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

要解决此问题，您可能需要为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（页）; 重发（）; }）; }

当然，如果你有更多的css文件，你需要管理一个特定的文件夹而不是文件。我想你这样做是为了学习Node，因为如果你不这样做，你可能想要使用express，这是一个准备使用节点的节点，可以节省你很多时间。

Answer 2

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

浏览器然后要求/home并获取一个HTML文档，该文档不是样式表。

您必须在浏览器要求时为浏览器提供样式表。

Answer 3

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

通常，我建议使用路由库，如express或koa。或者至少connect。它们可以轻松地挂钩称为中间件的功能，并使您能够使目录中的所有内容（如/ public）通过一个规则提供静态内容。

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

3 个答案: