Node.js 静态资源服务：从零实现 CSS、图片与 JS 的正确加载-js教程-PHP中文网

Node.js 静态资源服务：从零实现 CSS、图片与 JS 的正确加载

本文详解如何在不依赖 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 实现方案：

Rydberg Agent Node

使用一条命令部署ProbeChain Rydberg测试网代理节点。自动注册为Agent(NodeType=1)，免gas，支持macOS/Linux/Windows。触发词：/r

下载

✅ 正确的静态文件服务器（无 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 应用不可或缺的基础能力。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！