为什么不能用 NodeJS 的 jsdom 模块加载 CSS

Question

在我的本地 NodeJS 应用程序文件中，我尝试使用 jsdom 模块加载 CSS link 文件，然后以这种方式在浏览器上显示它

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 仍然没有加载，我仍然收到警告

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost/style.css".

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

提到的

Answer 1

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

Answer 2

最好安装serve-static模块

并且如果我们想要获取与请求 url 同名的页面（例如当点击 link 和 href="/another" 时获取 another.html）它是够加

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

行前

serve(req, res);

为什么不能用 NodeJS 的 jsdom 模块加载 CSS

Why can't load CSS with jsdom module for NodeJS

javascript

node.js

jsdom