为什么我的 CSS 文件没有加载到 Node-RED 上？

Question

我创建了一个非常简单的 Node-RED 流程，如下所示：

[{"id":"f2550b94.38775","type":"http in","z":"92cd7f6.acf58","name":"","url":"mypage","method":"get","upload":true,"swaggerDoc":"","x":150,"y":1820,"wires":[["d996137.45dc0f"]],"icon":"node-red/file-out.svg"},{"id":"34382576.899c32","type":"http response","z":"92cd7f6.acf58","name":"","statusCode":"","headers":{},"x":435,"y":1820,"wires":[],"l":false},{"id":"d996137.45dc0f","type":"template","z":"92cd7f6.acf58","name":"HTML","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n<head>\n    <link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\">\n</head>\n<body>\n    <h1>This is a heading</h1>\n    <p>This is a paragraph.</p>\n</body>\n</html>","output":"str","x":310,"y":1820,"wires":[["34382576.899c32"]],"icon":"node-red/parser-html.svg"},{"id":"d0acb79c.4200f8","type":"http in","z":"92cd7f6.acf58","name":"","url":"style.css","method":"get","upload":true,"swaggerDoc":"","x":150,"y":1860,"wires":[["7ff54806.73b928"]],"icon":"node-red/file-out.svg"},{"id":"750110.a3e6c6f","type":"http response","z":"92cd7f6.acf58","name":"","statusCode":"","headers":{"content-type":"text/css"},"x":435,"y":1860,"wires":[],"l":false},{"id":"7ff54806.73b928","type":"template","z":"92cd7f6.acf58","name":"CSS","field":"payload","fieldType":"msg","format":"css","syntax":"mustache","template":"body {\n    background-color: lightblue;\n}\n\nh1 {\n    color: navy;\n    margin-left: 20px;\n}","output":"str","x":310,"y":1860,"wires":[["750110.a3e6c6f"]],"icon":"node-red/parser-html.svg"}]

里面的HTML代码如下：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

里面的css代码：

body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 20px;
}

出于某种原因，Node-RED 上的 HTML 代码没有在我的 style.css 页面上加载 css 样式。我知道这个示例可以完美地处理分离的文件（没有 Node-RED），而且我也知道如果我使用 Nodejs 而不是使用 Node-RED 来提供 style.css 文件，样式将正确加载。所以我相信这是 Node-RED 的一个特定问题......我是否遗漏了它的工作原理？为什么 css 样式没有在 mypage 上加载？

页面应该是：

Node-RED 显示的页面：

Answer 1

您需要在对 "text/css"

的响应中设置 Content-type header

如何设置 headers 在 http-out 节点的边栏中有描述：

Inputs

payload string The body of the response.

statusCode number If set, this is used as the response status code. Default: 200.

headers object If set, provides HTTP headers to include in the response.

cookies object If set, can be used to set or delete cookies.

Details

The statusCode and headers can also be set within the node itself. If a property is set within the node, it cannot be overridden by the corresponding message property.

为什么我的 CSS 文件没有加载到 Node-RED 上？

Why my CSS file isn't loading on Node-RED?

node-red