Node.js HTTP服务器无法依次返回多个HTML文件的问题排查

核心问题分析 #

你遇到的情况大概率是客户端fetch请求未正确处理HTML响应，其次可能是服务器端文件路径错误或未处理流读取异常。

具体解决步骤 #

1. 修正客户端fetch请求逻辑

当用fetch发送POST请求时，浏览器不会自动渲染返回的HTML，必须手动处理响应并更新页面。示例客户端代码：

// 假设登录表单id为login-form
document.getElementById('login-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  
  try {
    const response = await fetch('/api/login', {
      method: 'POST',
      body: formData
    });
    
    if (!response.ok) throw new Error('请求失败');
    
    const html = await response.text();
    // 将返回的HTML替换页面内容或插入指定容器
    document.body.innerHTML = html;
  } catch (err) {
    console.error('登录出错:', err);
  }
});

2. 确保文件路径正确

避免相对路径的歧义，使用绝对路径读取文件：

const path = require('path');
// 在服务器代码中替换文件路径
const messagePath = path.join(__dirname, 'public', 'html', 'message.html');

3. 添加流错误监听

如果文件读取失败（如文件不存在），流会触发错误但不会自动返回响应，导致请求卡住。添加错误处理：

const stream = fs.createReadStream(messagePath);
stream.pipe(res);
stream.on('error', (err) => {
  res.writeHead(500, {'Content-Type': 'text/plain'});
  res.end('服务器错误: ' + err.message);
});

4. 优化服务器请求分支逻辑

用return避免后续代码执行，同时处理未匹配的路径：

http.createServer((req,res) =>{
    if (req.url === "/login" && req.method === "GET"){
        res.writeHead(200, {'Content-Type': `text/html` });
        const loginPath = path.join(__dirname, 'public', 'html', 'login.html');
        const stream = fs.createReadStream(loginPath);
        stream.pipe(res);
        stream.on('error', (err) => {
          res.writeHead(500, {'Content-Type': 'text/plain'});
          res.end('服务器错误: ' + err.message);
        });
        return;
    }

    if (req.url === "/api/login" && req.method === "POST"){
        // 这里执行用户认证逻辑
        res.writeHead(200, {'Content-Type': `text/html` });
        const messagePath = path.join(__dirname, 'public', 'html', 'message.html');
        const stream = fs.createReadStream(messagePath);
        stream.pipe(res);
        stream.on('error', (err) => {
          res.writeHead(500, {'Content-Type': 'text/plain'});
          res.end('服务器错误: ' + err.message);
        });
        return;
    }

    // 处理404情况
    res.writeHead(404, {'Content-Type': 'text/plain'});
    res.end('404 Not Found');
}).listen(3000, () => {
    console.log("Server is listening on port 3000");
});

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