Question

在我的本地NodeJS应用文件中，我试图使用jsdom模块通过CSS链接加载HTML文件，然后以这种方式在浏览器中显示

var http = require('http'),
fs = require('fs'),
jsdom = require('jsdom');

http.createServer(function(req, res) {

    if (req.url === '/favicon.ico') {
        res.writeHead(404);
        res.end();
        return;
    }

    res.writeHead(200, {'Content-Type': 'text/html; charset=utf8'});

    var indexPageHTML = fs.readFileSync('index.html');
    var document = new jsdom.JSDOM(indexPageHTML,{resources: "usable"}).window.document;
    var indexPageHTML = '<!doctype html><html>'+document.getElementsByTagName('html')[0].innerHTML+'</html>';

    res.end(indexPageHTML);

}).listen(80, 'localhost');

我的 index.html

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
Some text
</body>
</html>

但是CSS仍然没有加载，我仍然收到警告

资源解释为样式表，但以MIME类型传输 text / html：“ http://localhost/style.css”。

resources: "usable"选项应如何工作？链接https://www.npmjs.com/package/jsdom#basic-options

中提到了

Answer 1

这仅仅是因为您的http服务器为/favicon url返回了404错误，并为其他所有请求返回了相同的html页面。当您第一次在浏览器中加载页面时，浏览器会解析<link rel="stylesheet" href="style.css">标记，然后向服务器发送另一个请求。但是您的服务器会再次返回相同的html页面，而不是样式。

Answer 2

最好安装serve-static模块

如果我们想获取与请求网址名称相同的页面（例如，当点击带有another.html的链接时获取href="/another"）就足够了

if(req.url != '/' && !~req.url.indexOf('.')) {
    req.url = req.url+'.html';
}

在行之前

serve(req, res);

为什么无法使用Nodedom的jsdom模块加载CSS

2 个答案: