Node.js原生HTTP服务器无法向XMLHttpRequest客户端返回响应求助

问题分析与修复方案 #

1. 核心问题排查 #

服务器端问题

• 未处理CORS跨域机制：你用Live Server（非3000端口）访问localhost:3000属于跨域请求，浏览器会先发OPTIONS预检请求，当前服务器未处理该请求，且未添加CORS允许头，导致客户端无法正常接收响应。
• 请求体解析时机错误：qs.parse(body)放在了req.on('data')事件外部，此时请求体还未完全接收，body为空字符串，解析结果无意义。
• 未处理非POST请求：当浏览器发送OPTIONS或GET请求时，服务器无任何响应返回，会导致请求挂起，影响后续交互。

客户端问题

• 全局XHR实例复用冲突：全局声明的xhr对象会被多次点击请求复用，可能导致状态监听混乱，前一次请求未完成就被新请求覆盖。
• 未设置请求Content-Type头：发送表单格式数据时，未指定Content-Type为application/x-www-form-urlencoded，服务器可能无法正确解析请求体。

修正后的代码 #

服务器端（server.js）

var http = require('http');
var qs = require('querystring');

http.createServer(function (req, res) {
    // 添加CORS允许头，生产环境请替换为具体域名
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

    // 处理OPTIONS预检请求
    if (req.method === 'OPTIONS') {
        res.writeHead(200);
        res.end();
        return;
    }

    if (req.method === 'POST') {
        var body = '';
        req.on('data', function (data) {
            body += data;
            // 限制最大接收数据量，防止大请求攻击
            if (body.length > 1e6) {
                req.connection.destroy();
            }
        });

        req.on('end', () => {
            var post = qs.parse(body);
            console.log('接收的数据:', post);
            res.writeHead(200, {'Content-Type': 'text/plain'});
            res.end('Success');
        });
    } else {
        // 处理非POST请求，返回默认响应
        res.writeHead(200, {'Content-Type': 'text/plain'});
        res.end('Server is running');
    }
}).listen(3000);
console.log('服务器运行在 http://localhost:3000');

客户端（client.js）

let inputVal;

function load(url, callback) {
    // 每次请求创建新XHR实例，避免复用冲突
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
            console.log('请求状态:', xhr.readyState);
            console.log('响应状态码:', xhr.status);
            callback(xhr.response);
        }
    };
    xhr.open("POST", url, true);
    // 设置表单数据的Content-Type头
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // 对参数编码，避免特殊字符解析错误
    var body = "name=" + encodeURIComponent(inputVal);
    console.log('发送的数据:', body);
    xhr.send(body);
}

function alert_user(data) {
    window.alert("响应已接收");
    console.log("OK");
    console.log("响应内容:", data);
}

document.getElementById('searchBtn').addEventListener('click', function (e) {
    e.preventDefault();
    inputVal = document.getElementById("name").value;
    load("http://localhost:3000/", alert_user);
});

调试技巧 #

1. 浏览器Network面板：检查请求的状态码、响应头、响应内容，确认OPTIONS预检请求是否返回200状态。
2. 服务器控制台日志：在req.on('end')中打印body和post数据，验证请求体是否被正确解析。
3. 客户端XHR状态打印：在onreadystatechange中打印xhr.status，若为403/500则排查服务器端错误；若为200但响应为空，检查服务器是否正确调用res.end()。

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