Node.js静态资源加载技巧

本文手把手教你用纯 Node.js（零依赖 Express）搭建一个安全、健壮的静态资源服务器，彻底解决因路由硬编码导致的 CSS 不生效、图片不显示等常见问题；通过动态解析请求路径、精准设置 MIME 类型、严格防御路径遍历攻击，并支持自动索引页映射和清晰的错误处理，让你在深入理解 HTTP 服务本质的同时，获得可直接运行的生产级原型方案。

本文详解如何在不依赖 Express 的纯 Node.js 环境中，正确响应 HTML、CSS、图片等静态资源请求，解决因路由未适配导致样式和资源失效的问题。

本文详解如何在不依赖 Express 的纯 Node.js 环境中，正确响应 HTML、CSS、图片等静态资源请求，解决因路由未适配导致样式和资源失效的问题。

在你当前的代码中，http.createServer() 仅对所有请求统一返回 index.html 文件，并强制设置 Content-Type: text/html —— 这意味着无论浏览器请求的是 /style.css、/images/logo.png 还是 /script.js，服务器都只发回 HTML 内容。浏览器无法解析出真实资源，自然无法渲染样式或显示图片。

要真正支持静态资源，核心在于：根据 request.url 动态读取并返回对应文件，并设置正确的 MIME 类型。以下是可直接运行、安全且结构清晰的纯 Node.js 实现方案：

✅ 正确的静态文件服务器（无 Express）

const http = require('http');
const fs = require('fs');
const path = require('path');
const url = require('url');

const PORT = 3030;
const PUBLIC_DIR = path.join(__dirname, 'website');

// 映射扩展名到 Content-Type
const MIME_TYPES = {
  '.html': 'text/html',
  '.css': 'text/css',
  '.js': 'application/javascript',
  '.png': 'image/png',
  '.jpg': 'image/jpeg',
  '.jpeg': 'image/jpeg',
  '.gif': 'image/gif',
  '.ico': 'image/x-icon',
  '.json': 'application/json',
  '.txt': 'text/plain'
};

const server = http.createServer((req, res) => {
  const parsedUrl = url.parse(req.url);
  let pathname = parsedUrl.pathname;

  // 防路径遍历攻击：禁止 ../ 和绝对路径
  if (pathname.includes('..') || pathname.startsWith('/\\') || pathname.startsWith('\\')) {
    res.writeHead(403, { 'Content-Type': 'text/plain' });
    return res.end('Forbidden');
  }

  // 处理根路径 / → website/index.html
  if (pathname === '/' || pathname === '/index.html') {
    pathname = '/index.html';
  }

  const filePath = path.join(PUBLIC_DIR, pathname);

  // 自动补全目录结尾为 /index.html（如访问 /css/ → /css/index.html）
  fs.stat(filePath, (err, stats) => {
    if (err && err.code === 'ENOENT') {
      // 尝试添加 index.html 后缀（仅当路径以 / 结尾时）
      if (pathname.endsWith('/')) {
        const indexPath = path.join(PUBLIC_DIR, pathname, 'index.html');
        return serveFile(indexPath, res, '.html');
      }
      return notFound(res);
    }

    if (stats.isDirectory()) {
      const indexPath = path.join(filePath, 'index.html');
      return serveFile(indexPath, res, '.html');
    }

    serveFile(filePath, res, path.extname(filePath));
  });
});

function serveFile(filePath, res, ext) {
  const contentType = MIME_TYPES[ext] || 'application/octet-stream';

  fs.readFile(filePath, (err, data) => {
    if (err) {
      if (err.code === 'ENOENT') {
        return notFound(res);
      }
      console.error('Read file error:', err);
      res.writeHead(500, { 'Content-Type': 'text/plain' });
      return res.end('Internal Server Error');
    }

    res.writeHead(200, { 'Content-Type': contentType });
    res.end(data);
  });
}

function notFound(res) {
  res.writeHead(404, { 'Content-Type': 'text/plain' });
  res.end('404 Not Found');
}

server.listen(PORT, () => {
  console.log(`✅ Static server running on http://localhost:${PORT}`);
  console.log(`? Serving from: ${PUBLIC_DIR}`);
});

? 关键要点说明

• 路径安全第一：显式过滤 .. 和非法字符，防止恶意路径穿越（如 /../../etc/passwd）；
• 智能路径解析：自动将 /、/subdir/ 等目录路径映射为 index.html；
• 精准 MIME 类型：通过文件扩展名匹配标准 Content-Type，确保浏览器正确解析 CSS/JS/图片；
• 错误健壮性：区分 404（文件不存在） 和 500（读取失败），便于调试；
• 零依赖：仅使用 Node.js 内置模块（http, fs, path, url），适合学习底层原理。

⚠️ 注意事项

• 请确保 website/ 目录结构合理，例如：

  website/
  ├── index.html
  ├── style.css
  ├── images/
  │   └── logo.png
  └── script.js

• HTML 中引用资源需使用相对路径或根路径（推荐 /style.css 而非 ./style.css），确保 URL 与服务器路由一致；
• .less 文件不能被浏览器直接执行 —— 必须预先编译为 .css（可用 lessc CLI 或构建工具），本服务器只服务已编译的静态产物；
• 生产环境仍建议使用 Express、Vite 或 Nginx；本方案适用于教学、原型验证及理解 HTTP 服务本质。

掌握这一实现，你不仅解决了 CSS 和图片不加载的问题，更深入理解了 Web 服务器如何响应不同资源请求——这是构建任何 Web 应用不可或缺的基础能力。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Node.js静态资源加载技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。