Node.js服务器无法读取HTML中引入的CSS文件求助

阿华AIGC实验室

2026-5-15

解决Node.js服务器无法加载CSS文件的问题

嘿，我来帮你搞定这个问题！你的核心问题在于当前的Node服务器不管收到什么请求，都会返回index.html文件——包括浏览器请求style.css的时候。而且返回的Content-Type始终是text/html，浏览器没法把它当成CSS解析，自然就加载失败了。

下面是修复后的完整方案：

步骤1：修改Node.js服务器代码

我们需要解析请求的URL，根据不同的请求路径返回对应的文件，并设置正确的响应头：

var http = require('http');
var fs = require('fs');
var url = require('url'); // 引入url模块解析请求路径

http.createServer(function (req, res) {
  // 解析请求的URL路径
  const parsedUrl = url.parse(req.url);
  let filePath = '';
  let contentType = 'text/html'; // 默认是HTML类型

  // 根据请求路径判断要返回的文件
  switch(parsedUrl.pathname) {
    case '/':
      filePath = 'index.html';
      break;
    case '/style.css':
      filePath = 'style.css';
      contentType = 'text/css'; // CSS文件要设置正确的Content-Type
      break;
    default:
      // 处理404情况
      res.writeHead(404, {'Content-Type': 'text/html'});
      res.write('<h1>404 Not Found</h1>');
      res.end();
      return;
  }

  // 读取对应文件并返回
  fs.readFile(filePath, function(err, data) {
    if (err) {
      // 文件不存在时返回404
      res.writeHead(404, {'Content-Type': 'text/html'});
      res.write('<h1>404 Not Found</h1>');
    } else {
      res.writeHead(200, {'Content-Type': contentType});
      res.write(data);
    }
    res.end();
  });
}).listen(8080, () => {
  console.log('Server running at http://localhost:8080/');
});