服务器或 HTML 不显示 CSS（但在打开 HTML 文件时有效）答案

【问题标题】：Server or HTML isn't displaying CSS (but works when opening HTML file)服务器或 HTML 不显示 CSS（但在打开 HTML 文件时有效）
【发布时间】：2019-07-19 09:40:05
【问题描述】：

我第一次尝试学习如何为一个简单的网站设置 node.js 服务器，但遇到了一些奇怪的行为。当我从我的计算机打开我的 index.html 文件时，它会完美打开，所有 CSS 都正常工作。但是，然后我设置了一个基本的 node.js 服务器，当通过我的浏览器访问 index.html 文件时，它只加载 html 而不是 CSS。

我对此非常陌生，因此无法尝试太多，还因为代码非常简单，所以看不到缺少什么（如果有帮助，我尝试遵循 this 教程）。我还发现了另一个在这里看起来相似的问题，但它没有答案，也没有真正的帮助，我确实检查了所有文件都是 UTF-8。

HTML：

<html>
<head>
  <title>My Page</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<h1>A headline</h1>
</body>
</html>

还有 node.js 服务器：

const http = require("http");
const fs = require("fs");

const server = http.createServer((req, res) => {
  res.writeHead(200, {"Content-Type": "text/html"});
  const myReadStream = fs.createReadStream(__dirname + "/index.html", "utf8");
  myReadStream.pipe(res);
});

server.listen(3000, "127.0.0.1");
console.log("Listening to port 3000");

当我将 CSS 包含在 <style> 标记中并直接在 index.html 中时，它确实有效，但我尝试将 <link rel="stylesheet" href="styles.css" type="text/css"> 放在 <style> 标记之间，但仍然没有（如果这是必要的，因为当我打开 html 文件时它会完美显示）。我也试过删除type=text/css，但这似乎并没有改变任何东西。任何帮助将不胜感激！

【问题讨论】：

我不是节点专家，但看起来您只为index.html 提供服务，没有别的。您的服务器不知道styles.css 是什么，因此当您的页面加载时，它会尝试从服务器请求styles.css，但它无法处理该请求。我可能找错树了。

标签： html css node.js

【解决方案1】：

您还需要为style.css 提供服务。您正在为 index.html 提供服务，但在 index.html 中，当请求到达您的应用程序时，它正在点击 http://127.0.0.1:300/style.css，它仍在为 index.html 文件提供服务。（您可以在开发者工具的 Network 面板中确认）

const server = http.createServer(function (req, res) {
  const url = req.url;
  if (url === '/style.css') {
    res.writeHead(200, { 'Content-Type': 'text/css' }); // http header
    fs.createReadStream(__dirname + "/style.css", "utf8").pipe(res);
  } else {
    res.writeHead(200, { 'Content-Type': 'text/html' }); // http header
    fs.createReadStream(__dirname + "/index.html", "utf8").pipe(res);
  }
})

注意：使用express 很容易实现这一点，这可能是最流行的nodejs 包。

【讨论】：

刚刚想到 - 我是否也必须这样做才能加载图像？因为那些似乎也没有出现
是的，每条被击中的路线，您都需要处理一切。但是如果你只是想提供服务，你可以使用一个名为 http-server 的包来运行一个 http 服务器。