Node.js项目中无法加载自定义CSS和JS文件的问题求助

嘿，我懂你碰到的这个麻烦！现在你的Node.js服务器不管浏览器请求什么资源，都一股脑只返回index.html文件——这就是为啥CDN上的Bootstrap、Font Awesome能正常加载（浏览器直接去CDN服务器拿资源），但你本地的main.css和自定义JS完全加载失败的核心原因。

问题根源 #

你的app.js代码里，不管req.url是/css/main.css还是其他静态资源路径，服务器都会执行fs.readFile('index.html')，把HTML内容返回给浏览器。浏览器拿到本应该是CSS/JS的内容却是HTML，自然没法解析，加载就失败了。

解决方案：让服务器处理静态资源请求 #

我们需要修改服务器代码，让它根据请求的URL返回对应的静态文件，并且设置正确的Content-Type（告诉浏览器返回的是什么类型的文件）。

修改后的完整app.js代码

var http = require('http');
var fs = require('fs');
var path = require('path'); // 引入path模块，更安全地处理文件路径

http.createServer(function (req, res) {
  // 确定请求的文件路径
  let filePath = '.' + req.url;
  // 如果请求根路径（比如http://localhost:8080/），返回index.html
  if (filePath === './') {
    filePath = './index.html';
  }

  // 根据文件扩展名设置对应的Content-Type
  const extname = path.extname(filePath);
  let contentType = 'text/html';
  switch (extname) {
    case '.css':
      contentType = 'text/css';
      break;
    case '.js':
      contentType = 'text/javascript';
      break;
    case '.pdf':
      contentType = 'application/pdf';
      break;
    // 后续如果有图片等资源，可以在这里添加对应的类型，比如：
    // case '.png':
    //   contentType = 'image/png';
    //   break;
  }

  // 读取目标文件并返回响应
  fs.readFile(filePath, function(err, content) {
    if (err) {
      if(err.code === 'ENOENT') {
        // 请求的文件不存在时，返回404页面
        res.writeHead(404, { 'Content-Type': 'text/html' });
        res.end('<h1>404 资源未找到</h1>');
      } else {
        // 其他服务器内部错误
        res.writeHead(500);
        res.end('服务器错误：' + err.code);
      }
    } else {
      // 文件存在时，返回正确的内容和响应头
      res.writeHead(200, { 'Content-Type': contentType });
      res.end(content, 'utf-8');
    }
  });
}).listen(8080);

额外注意事项 #

• 确保你的index.html里引用静态资源用的是绝对路径，比如：

  <link rel="stylesheet" href="/css/main.css">
  <!-- 自定义JS也要用类似的绝对路径 -->
  <script src="/js/your-custom-script.js"></script>
  

• 如果后续需要支持更多类型的静态资源，直接在switch语句里添加对应的Content-Type即可。

这样修改后，服务器就能正确识别并返回你的自定义CSS、JS和其他静态资源了！

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