NodeJS中外联CSS文件无法生效问题求助

我看过你的代码和项目结构了，问题出在你的服务器没有针对CSS文件的请求做正确处理——不管浏览器请求什么资源，你的服务器都只返回index.html，而且强制设置了Content-Type: text/html，这就导致浏览器拿到的CSS文件其实是HTML内容，自然无法生效。另外，后端代码里引入jquery完全没必要，这是前端库，Node.js后端用不到，可以删掉。

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

步骤1：修改server.js，处理不同资源的请求 #

更新你的服务器代码，让它根据请求的URL返回对应的文件，并设置正确的Content-Type：

var http = require('http');
var fs = require('fs');

function onRequest(request, response) {
  // 根据请求路径判断要返回的文件
  if (request.url === '/' || request.url === '/index.html') {
    response.writeHead(200, {'Content-Type': 'text/html'});
    fs.readFile('./index.html', null, function(error, data) {
      if (error) {
        response.writeHead(404);
        response.write('File not found');
      } else {
        response.write(data);
      }
      response.end(); // 一定要结束响应
    });
  } else if (request.url === '/style.css') {
    response.writeHead(200, {'Content-Type': 'text/css'});
    fs.readFile('./style.css', null, function(error, data) {
      if (error) {
        response.writeHead(404);
        response.write('CSS file not found');
      } else {
        response.write(data);
      }
      response.end();
    });
  } else {
    response.writeHead(404);
    response.write('Page not found');
    response.end();
  }
}

http.createServer(onRequest).listen(3000); // 这里可以改成你实际使用的端口
console.log('Server running on http://localhost:3000');

步骤2：确认index.html中的CSS引用路径正确 #

检查你的index.html里的CSS链接是否正确，应该是这样的相对路径写法：

<link rel="stylesheet" href="style.css">

如果写成了错误的绝对路径或嵌套路径，也会导致CSS加载失败。

为什么之前的代码不行？ #

• 原代码中，不管请求的是/还是/style.css，服务器都返回index.html，并且设置Content-Type为text/html，浏览器会把这份内容当成HTML解析，而不是CSS。
• 后端引入jquery属于冗余代码，完全可以删除，不会影响功能。

测试方法 #

1. 重启你的Node.js服务器
2. 打开浏览器访问http://localhost:3000（对应你设置的端口）
3. 打开浏览器开发者工具（F12），切换到「网络」标签，刷新页面，查看style.css的请求状态：如果状态是200，且响应内容是你的CSS代码，就说明成功了。

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