Node.js服务器无法加载CSS，但本地打开HTML正常求助

嘿，我刚看完你的问题，一下子就明白问题出在哪了！咱们一步步来拆解：

问题根源 #

你现在的Node.js服务器有个关键问题：不管浏览器请求的是什么资源（比如index.html或者styles.css），它都只会返回index.html的内容，而且把所有响应的Content-Type都设成了text/html。

当你直接打开本地的index.html时，浏览器是从本地文件系统读取styles.css，路径没问题所以样式正常；但通过服务器访问时，浏览器会向服务器发送/styles.css的请求，结果服务器返回的却是HTML内容，浏览器自然没法把它当成CSS解析，样式就失效了。

修复方案 #

我们需要修改服务器代码，让它根据不同的请求路径返回对应的资源，并且设置正确的Content-Type：

const http = require("http");
const fs = require("fs");
const path = require("path"); // 用path模块处理文件路径更安全可靠

const server = http.createServer((req, res) => {
  // 判断请求的路径
  if (req.url === "/" || req.url === "/index.html") {
    // 请求首页，返回HTML文件
    res.writeHead(200, {"Content-Type": "text/html"});
    // 用path.join拼接路径，避免手动拼接出错
    const htmlStream = fs.createReadStream(path.join(__dirname, "index.html"), "utf8");
    htmlStream.pipe(res);
  } else if (req.url === "/styles.css") {
    // 请求CSS文件，返回样式文件，注意Content-Type要设为text/css
    res.writeHead(200, {"Content-Type": "text/css"});
    const cssStream = fs.createReadStream(path.join(__dirname, "styles.css"), "utf8");
    cssStream.pipe(res);
  } else {
    // 处理404情况，返回404页面
    res.writeHead(404, {"Content-Type": "text/html"});
    res.end("<h1>404 Not Found</h1>");
  }
});

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

额外提示 #

如果以后你的网站有更多静态资源（比如JS文件、图片、字体等），手动写一堆if-else判断会很麻烦。作为新手，你可以试试Express框架，它专门处理这类静态资源的问题，只需要一行代码就能搞定：

// 先安装express：npm install express
const express = require('express');
const app = express();

// 把静态资源目录（比如public）设为静态文件夹
app.use(express.static('public'));

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

这样所有放在public文件夹里的资源（包括HTML、CSS、JS）都能被正确访问了。

内容的提问来源于stack exchange，提问作者Jul