本文旨在解决 Node.js 服务器在浏览器中渲染 HTML 文件时，文件内容被解析为纯文本而非 HTML 的问题。通过分析常见错误配置，并提供修正后的代码示例，帮助开发者正确配置 Content-Type 头部，并确保服务器能够正确地提供 HTML、CSS 和 JavaScript 等静态资源，从而实现预期的页面渲染效果。
在 Node.js 中，使用 http 模块创建服务器并提供 HTML 文件时，如果浏览器将 HTML 文件显示为纯文本，通常是由于以下几个原因：
- Content-Type 头部设置不正确： 服务器没有正确地设置 Content-Type 头部，浏览器无法识别文件类型，默认将其作为纯文本处理。
- 静态资源未正确提供： HTML 文件依赖的 CSS 和 JavaScript 文件没有被服务器正确地提供，导致页面样式和交互失效。
- 文件路径问题：服务器无法找到对应的文件。
以下是一个修正后的 server.js 示例，它解决了上述问题：
const http = require('http');
const fs = require('fs');
const path = require('path');
const loadAndStream = (filePath, mineType, res) => {
const fileStream = fs.createReadStream(filePath, "UTF-8");
res.writeHead(200, {"Content-Type": mineType});
fileStream.pipe(res);
}
http.createServer(function (req, res){
if(req.url === '/'){
const filePath = path.join(__dirname, 'index.html');
loadAndStream(filePath, 'text/html', res)
}
if(req.url === '/styles/style.css'){
const filePath = path.join(__dirname, 'styles', 'style.css');
loadAndStream(filePath, 'text/css', res);
}
if(req.url === '/scripts/main.js'){
const filePath = path.join(__dirname, 'scripts', 'main.js');
loadAndStream(filePath, 'application/javascript', res)
}
}).listen(7800);代码解释：
立即学习“前端免费学习笔记（深入）”；
- 引入模块： 引入 http、fs 和 path 模块，分别用于创建 HTTP 服务器、文件系统操作和路径处理。
- loadAndStream 函数： 定义了一个名为 loadAndStream 的函数，用于读取文件内容并将其作为 HTTP 响应流式传输到客户端。该函数接收文件路径 filePath、MIME 类型 mineType 和 HTTP 响应对象 res 作为参数。
- 创建 HTTP 服务器： 使用 http.createServer 方法创建一个 HTTP 服务器，并传入一个请求处理函数。
-
路由处理： 在请求处理函数中，根据请求的 URL (req.url) 执行不同的操作。
- 当 URL 为 / 时，读取 index.html 文件，并设置 Content-Type 头部为 text/html。
- 当 URL 为 /styles/style.css 时，读取 style.css 文件，并设置 Content-Type 头部为 text/css。
- 当 URL 为 /scripts/main.js 时，读取 main.js 文件，并设置 Content-Type 头部为 application/javascript。
- 监听端口： 使用 listen 方法监听 7800 端口，启动服务器。
关键点：
- 正确的 Content-Type 头部： 针对不同的文件类型，设置正确的 Content-Type 头部。例如，HTML 文件使用 text/html，CSS 文件使用 text/css，JavaScript 文件使用 application/javascript。
- 静态资源服务： 确保服务器能够正确地提供 HTML 文件依赖的 CSS、JavaScript 和其他静态资源。需要为每个静态资源文件定义相应的路由和 Content-Type 头部。
- 路径处理： 使用 path.join 方法拼接文件路径，确保文件路径的正确性，避免出现文件找不到的错误。
- 流式传输： 使用 fs.createReadStream 和 pipe 方法实现文件的流式传输，可以提高服务器的性能和响应速度。
注意事项：
- 在实际项目中，可以使用更专业的静态资源服务器，例如 express.static 中间件，来简化静态资源的提供。
- 确保文件路径的正确性，可以使用绝对路径或相对于服务器脚本的相对路径。
- 根据实际情况，设置合适的 Content-Type 头部。
通过以上步骤，可以解决 Node.js 服务器渲染 HTML 文件显示为文本的问题，并确保浏览器能够正确地解析和渲染 HTML 页面。
