Node.js原生服务器无法加载CSS及图片问题求助

问题根源 #

你当前的服务器不管客户端请求什么资源（比如/style.css或者/images/logo.png），都只会返回index.html的内容，浏览器拿到CSS、图片请求的结果都是HTML，自然无法加载样式和图片。

修改后的原生HTTP服务器代码 #

以下代码会根据请求路径读取对应静态文件，返回正确内容并设置匹配的Content-Type：

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

const PORT = 3030;
const baseDir = "./website"; // 你的静态文件根目录

// 映射文件扩展名到对应的Content-Type
const mimeTypes = {
  ".html": "text/html",
  ".css": "text/css",
  ".js": "text/javascript",
  ".png": "image/png",
  ".jpg": "image/jpeg",
  ".gif": "image/gif",
  ".less": "text/css"
};

http.createServer((req, res) => {
  // 根路径请求直接返回index.html
  let filePath = req.url === "/" ? path.join(baseDir, "index.html") : path.join(baseDir, req.url);
  
  // 获取文件扩展名
  const ext = path.extname(filePath);
  const contentType = mimeTypes[ext] || "application/octet-stream";

  fs.readFile(filePath, (err, content) => {
    if (err) {
      if (err.code === "ENOENT") {
        // 文件不存在返回404
        res.writeHead(404, { "Content-Type": "text/html" });
        res.end("<h1>404 资源未找到</h1>");
      } else {
        // 服务器内部错误返回500
        res.writeHead(500);
        res.end(`服务器错误: ${err.code}`);
      }
    } else {
      // 处理LESS文件编译
      if (ext === ".less") {
        // 先执行npm install less安装依赖
        const less = require("less");
        less.render(content.toString(), (lessErr, output) => {
          if (lessErr) {
            res.writeHead(500);
            res.end(`LESS编译错误: ${lessErr.message}`);
            return;
          }
          res.writeHead(200, { "Content-Type": contentType });
          res.end(output.css, "utf-8");
        });
      } else {
        res.writeHead(200, { "Content-Type": contentType });
        res.end(content, "utf-8");
      }
    }
  });
}).listen(PORT);

console.log(`Server is running on port ${PORT}`);

关键说明 #

1. 路径处理：用path模块拼接路径，避免跨平台路径问题，同时处理根路径默认返回index.html。
2. Content-Type设置：根据文件扩展名返回对应MIME类型，确保浏览器能正确解析资源。
3. 错误处理：捕获文件不存在和服务器内部错误，返回对应状态码和提示信息，方便调试。
4. LESS编译：若使用LESS，需先执行npm install less安装依赖，代码会自动将LESS编译为CSS后返回。

使用步骤 #

1. 用上述代码替换你的index.js。
2. 若使用LESS，执行npm install less安装依赖。
3. 确保HTML、CSS/LESS、图片等静态文件都放在website目录下，HTML中资源引用路径要正确（比如<link rel="stylesheet" href="/style.less">或<img src="/images/photo.jpg">）。
4. 启动服务器：node index.js，访问http://localhost:3030即可。

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