纯Node.js服务器Content-Type配置问题：CSS文件已传输但样式未生效原因解析

Hey there! Let's break down why your second server code fails to apply Tailwind CSS styles, while the first one works perfectly.

核心差异：Content-Type HTTP头的处理 #

The critical difference between the two code snippets lies in how they set the Content-Type header based on the requested file type—this is exactly why one works and the other doesn't.

正确代码的关键逻辑

In your working code, you included a switch statement that adjusts the contentType variable to match the file's extension:

const url = require('url');
const fs = require('fs');
const path = require('path');
http
 .createServer(function (req, res) {
 let filePath = path.join(
 __dirname, '../public', req.url === '/' ? 'index.html' : req.url
 );
 let extname = path.extname(filePath);
 let contentType = 'text/html';
 switch (extname) {
 case '.js':
 contentType = 'text/javascript';
 break;
 case '.css':
 contentType = 'text/css';
 break;
 case '.json':
 contentType = 'application/json';
 break;
 case '.png':
 contentType = 'image/png';
 break;
 case '.jpg':
 contentType = 'image/jpg';
 break;
 }
 fs.readFile(filePath, (err, content)=> {
 if (err) throw err
 res.writeHead(200, {'Content-Type': contentType})
 res.write(content)
 res.end()
 })
 })
 .listen(8080);

When the browser requests tailwind.css, this code sets the response header to Content-Type: text/css. Browsers rely on this header to know how to interpret the content—so it recognizes the file as a stylesheet and applies the styles to your page.

错误代码的问题所在

Your non-working code skips this critical switch logic:

const url = require('url');
const fs = require('fs');
const path = require('path');
http
 .createServer(function (req, res) {
 let filePath = path.join(
 __dirname, '../public', req.url === '/' ? 'index.html' : req.url
 );
 let extname = path.extname(filePath);
 let contentType = 'text/html';
 fs.readFile(filePath, (err, content)=> {
 if (err) throw err
 res.writeHead(200, {'Content-Type': contentType})
 res.write(content)
 res.end()
 })
 })
 .listen(8080);

Here, contentType is stuck as text/html for every request—even when sending tailwind.css. When the browser gets the CSS content with this header, it treats the code as HTML markup instead of a stylesheet. That's why your styles don't show up: the browser has no clue it should use that content to style your page!

简单总结 #

Think of the Content-Type header as a "label" for your file content. If you label a CSS file as HTML, the browser won't use it for styling. Adding back that switch statement to set the correct MIME type for each file extension will fix the issue immediately.

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