Node.js服务HTML页面时style.css与index.js文件无法生效问题

你的问题出在请求处理逻辑的顺序和响应头设置错误，导致浏览器无法正确解析CSS和JS文件。我们一步步来修正：

核心问题点 #

• 不管用户请求的是HTML、CSS还是JS，你都先返回了index.html的内容，再追加对应资源——这会让/style.css的响应内容变成「HTML代码+CSS代码」的混合体，浏览器根本识别不了这是合法的CSS文件。
• 所有请求统一设置Content-Type: text/html，但CSS应该用text/css，JS应该用application/javascript，错误的MIME类型会直接让浏览器忽略这些资源。
• 你的端口判断逻辑有语法错误，可能导致服务器监听的端口不符合预期。
• fs.readFileSync是同步方法，不需要传入回调函数（你写的回调根本不会执行，因为同步方法直接返回结果）。

修正后的完整server.js代码 #

const PORT = process.env.PORT || 3000;
const http = require('http');
const fs = require('fs');
const path = require('path');

// 启动时预缓存文件（同步读取，只执行一次）
const filePath = {
  index: path.join(__dirname, 'public', 'index.html'),
  style: path.join(__dirname, 'public', 'style.css'),
  script: path.join(__dirname, 'public', 'index.js')
};

let cache = {};
try {
  cache.index = fs.readFileSync(filePath.index, 'utf8');
  cache.style = fs.readFileSync(filePath.style, 'utf8');
  cache.script = fs.readFileSync(filePath.script, 'utf8');
} catch (err) {
  console.error('Failed to cache files:', err);
  process.exit(1);
}

function requestHandler(req, res) {
  // 根据请求URL返回对应资源
  switch(req.url) {
    case '/':
      res.setHeader('Content-Type', 'text/html');
      res.statusCode = 200;
      res.end(cache.index);
      break;
    case '/style.css':
      res.setHeader('Content-Type', 'text/css');
      res.statusCode = 200;
      res.end(cache.style);
      break;
    case '/index.js':
      res.setHeader('Content-Type', 'application/javascript');
      res.statusCode = 200;
      res.end(cache.script);
      break;
    default:
      res.statusCode = 404;
      res.end('404 Not Found');
  }
}

http.createServer(requestHandler).listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

关键改动说明 #

1. 资源请求分离：用switch语句区分不同的请求URL，每个URL只返回对应的资源，不会混合内容。
2. 正确设置Content-Type：
   • HTML用text/html
   • CSS用text/css
   • JS用application/javascript
3. 简化端口逻辑：用process.env.PORT || 3000，优先使用环境变量的端口，没有则用3000，语法更简洁可靠。
4. 优化缓存逻辑：用对象管理缓存的文件路径和内容，加上错误捕获，启动时如果读取文件失败会直接提示并退出，避免运行时出错。
5. 正确使用readFileSync：去掉了无用的回调函数，同步读取的结果直接赋值给缓存变量。

额外建议 #

如果你的项目后续需要处理更多静态资源（比如图片、字体），推荐使用express框架的express.static中间件，它会自动处理静态资源的路径、MIME类型和缓存，比手动写请求处理高效得多。

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