將CSS文件鏈接到Node.js服務器

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文件的鏈接時，它會請求以下URL： /styles/styles.css 。 服務器接收到該URL，並且由於它與兩個已定義的路由不匹配，它將進入else語句，該語句將發送重定向到/ home，因此，您的瀏覽器在請求CSS文件時將僅接收位於中的html頁面。 /家。

要解決此問題，您可能需要為css文件添加新規則：

否則if（req.url ==='/styles/styles.css'）{fs.readFile（'styles / styles.css'，function（err，page）{res.writeHead（200，{'Content-Type' ：'text / css'}）; res.write（page）; res.end（）;}）; }

當然，如果您有更多的CSS文件，則需要管理特定的文件夾而不是文件。 我想您正在這樣做是為了學習Node，因為如果您不這樣做，則可能要使用express ，這是Node可以使用的Web服務器，可以節省大量時間。

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）都通過一條規則提供靜態內容。