Node.js 服务器渲染 HTML 文件显示为文本的解决方案
很多刚接触 Node.js 后端开发的开发者，在尝试用 Node.js 原生模块搭建静态服务器、返回 HTML 文件时，经常会遇到一个问题：浏览器访问服务器地址后，没有渲染出 HTML 页面的结构，反而把 HTML 文件的完整文本内容直接显示在了页面上。这种情况通常是因为响应头的 Content-Type 设置不符合要求导致的，下面我们就来分析问题原因并给出对应的解决方案。
问题产生的原因
浏览器接收到服务器返回的响应时，会根据响应头中的 Content-Type 字段来判断返回内容的类型，从而决定用什么方式处理内容：
- 如果
Content-Type设置为text/html，浏览器就会把内容当作 HTML 文档解析渲染，正常显示页面结构。 - 如果
Content-Type没有设置，或者设置成了text/plain，浏览器就会把内容当作纯文本处理，直接把代码文本展示出来，也就出现了我们看到的“HTML 显示为文本”的问题。
基础解决方案：手动设置响应头
如果使用 Node.js 原生的 http 模块开发服务器，只需要在返回 HTML 内容之前，手动设置正确的响应头即可。下面是一个完整的可运行示例：
const http = require('http');
const fs = require('fs');
const path = require('path');
// 创建 HTTP 服务器
const server = http.createServer((req, res) => {
// 只处理根路径的请求，返回 index.html
if (req.url === '/') {
// 拼接 HTML 文件的路径，这里假设 index.html 和当前脚本在同一目录
const htmlPath = path.join(__dirname, 'index.html');
// 读取 HTML 文件内容
fs.readFile(htmlPath, 'utf-8', (err, data) => {
if (err) {
// 读取文件失败，返回 404 状态码和提示
res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' });
res.end('未找到对应的 HTML 文件');
return;
}
// 重点：设置正确的 Content-Type 为 text/html，同时指定字符集为 utf-8 避免乱码
res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
// 返回 HTML 内容
res.end(data);
});
} else {
// 其他路径返回 404
res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' });
res.end('请求的路径不存在');
}
});
// 服务器监听 3000 端口，访问 127.0.0.1:3000 即可查看效果
server.listen(3000, () => {
console.log('服务器已启动，监听 3000 端口');
});上面的代码中，我们在返回 HTML 内容前通过 res.writeHead 设置了 Content-Type: text/html; charset=utf-8，浏览器拿到响应后就会正确解析 HTML 内容，不会再显示文本。
对应的测试用 index.html 文件内容可以参考下面的示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Node.js 渲染测试</title> </head> <body> <h1>这是通过 Node.js 服务器返回的 HTML 页面</h1> <p>如果正确设置 Content-Type，这段文字会正常渲染，不会显示为代码文本。</p> </body> </html>
进阶方案：使用框架或封装通用逻辑
如果是实际项目开发，手动处理每个请求的响应头会比较繁琐，我们可以做两层优化：
1. 使用 Express 框架简化操作
Express 是 Node.js 最常用的 web 框架，它内置了静态文件中间件，会自动根据文件后缀设置正确的 Content-Type，不需要我们手动处理响应头：
const express = require('express');
const path = require('path');
const app = express();
// 使用 express.static 中间件托管静态文件，参数为静态文件所在的目录
// 这里表示把当前目录下的 public 文件夹作为静态资源目录
app.use(express.static(path.join(__dirname, 'public')));
// 启动服务器监听 3000 端口
app.listen(3000, () => {
console.log('Express 服务器已启动，监听 3000 端口，访问 127.0.0.1:3000 即可查看静态 HTML 文件');
});只需要把 HTML 文件放到 public 目录下，访问对应的文件名就可以正常渲染，Express 会自动处理 Content-Type 的设置，避免了手动出错的可能。
2. 原生模块封装 MIME 类型映射
如果不想使用框架，也可以自己封装一个 MIME 类型映射表，根据请求文件的后缀自动设置对应的 Content-Type，适配更多类型的静态文件：
const http = require('http');
const fs = require('fs');
const path = require('path');
// MIME 类型映射表，根据实际需求可以扩展更多类型
const mimeTypes = {
'.html': 'text/html',
'.css': 'text/css',
'.js': 'application/javascript',
'.json': 'application/json',
'.png': 'image/png',
'.jpg': 'image/jpeg',
'.gif': 'image/gif'
};
const server = http.createServer((req, res) => {
// 获取请求文件的路径，默认访问 index.html
let filePath = path.join(__dirname, req.url === '/' ? 'index.html' : req.url);
// 获取文件的后缀名
const extname = path.extname(filePath);
// 根据后缀名获取对应的 Content-Type，默认使用 text/plain
const contentType = mimeTypes[extname] || 'text/plain';
fs.readFile(filePath, (err, data) => {
if (err) {
if (err.code === 'ENOENT') {
// 文件不存在，返回 404
res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' });
res.end('请求的文件不存在');
} else {
// 其他服务器错误，返回 500
res.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8' });
res.end('服务器内部错误');
}
return;
}
// 设置正确的 Content-Type，返回文件内容
res.writeHead(200, { 'Content-Type': `${contentType}; charset=utf-8` });
res.end(data);
});
});
server.listen(3000, () => {
console.log('通用静态服务器已启动，监听 3000 端口');
});注意事项
- 设置
Content-Type时一定要加上charset=utf-8，否则中文内容可能会出现乱码。 - 如果返回的 HTML 文件中包含外部引用的 CSS、JS 文件，也需要单独处理这些静态文件的请求，设置对应的
Content-Type，上面的 MIME 映射方案已经覆盖了这个场景。 - 如果是在本地测试，访问地址使用 127.0.0.1:端口号 或者 localhost:端口号 即可，不需要额外配置。