Node.js响应报SyntaxError: JSON.parse: unexpected end of data问题排查

嘿，这个错误我之前踩过好几次坑，本质就是浏览器尝试解析服务器返回的内容时，发现它不是合法的JSON，甚至可能是空的。咱们一步步排查修复：

常见原因分析 #

• 服务器没有返回完整且合法的JSON数据，比如出错时没做处理就直接结束响应
• 服务器没设置正确的响应头Content-Type: application/json，浏览器不知道要按JSON格式解析内容
• AJAX请求的配置有问题，比如没设置请求头、数据格式不对，导致服务器无法正确处理请求
• 如果是POST请求，服务器没正确解析请求体，没法生成对应的JSON响应

修正后的完整代码示例 #

1. HTML文件（带AJAX的表单页面） #

<!DOCTYPE html>
<html>
<head>
    <title>ID查询</title>
</head>
<body>
    <input type="text" id="idInput" placeholder="输入ID">
    <button onclick="fetchData()">查询</button>
    <div id="result"></div>

    <script>
        function fetchData() {
            const id = document.getElementById('idInput').value;
            const xhr = new XMLHttpRequest();
            
            xhr.open('POST', '/getUser', true);
            // 关键：设置请求头，告诉服务器我们发送的是JSON格式
            xhr.setRequestHeader('Content-Type', 'application/json');
            
            xhr.onload = function() {
                // 先检查响应状态码，确保请求成功
                if (xhr.status >= 200 && xhr.status < 300) {
                    try {
                        const data = JSON.parse(xhr.responseText);
                        document.getElementById('result').textContent = `ID: ${data.id}, 名称: ${data.name}`;
                    } catch (err) {
                        console.error('JSON解析失败:', err);
                        document.getElementById('result').textContent = '服务器返回数据格式错误';
                    }
                } else {
                    document.getElementById('result').textContent = `请求失败，状态码: ${xhr.status}`;
                }
            };
            
            // 发送JSON格式的请求体
            xhr.send(JSON.stringify({ id: id }));
        }
    </script>
</body>
</html>

2. Node.js服务器文件（用Express框架简化开发） #

如果坚持用原生HTTP模块也可以，但Express处理请求会更省心：

const express = require('express');
const app = express();
const port = 3000;

// 关键：解析JSON格式的请求体
app.use(express.json());

// 模拟存储的ID-名称数据
const userData = {
    '1': '张三',
    '2': '李四',
    '3': '王五'
};

// 处理AJAX请求
app.post('/getUser', (req, res) => {
    const userId = req.body.id;
    
    // 检查ID是否存在
    if (userData[userId]) {
        // 设置正确的响应头，返回合法JSON
        res.setHeader('Content-Type', 'application/json');
        res.json({ id: userId, name: userData[userId] });
    } else {
        // 即使没找到，也要返回合法JSON，绝对不能返回空响应
        res.status(404).json({ error: '该ID不存在' });
    }
});

// 托管静态HTML文件
app.use(express.static('.'));

app.listen(port, () => {
    console.log(`服务器运行在 http://localhost:${port}`);
});

关键注意点 #

• 请求头设置：AJAX发送POST请求时，一定要设置Content-Type: application/json，同时用JSON.stringify()把数据转成JSON字符串发送
• 服务器解析请求体：用express.json()（或者原生HTTP模块的body-parser）解析JSON请求体，不然req.body会是undefined
• 响应必须合法：不管请求成功还是失败，服务器都要返回完整的JSON，绝对不能返回空响应或者非JSON内容
• 错误捕获：在AJAX的onload里先检查状态码，再用try-catch包裹JSON解析，避免因为解析失败导致页面崩溃

测试步骤 #

1. 确保安装了Express：npm install express
2. 把HTML和服务器文件放在同一个文件夹
3. 启动服务器：node server.js
4. 打开浏览器访问http://localhost:3000，输入ID测试

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