使用fetch请求localhost时遇Uncaught SyntaxError: Unexpected end of JSON input求助

云上老周

2026-8-10

解决Uncaught SyntaxError: Unexpected end of JSON input错误

这个错误的核心原因是你用res.json()尝试解析的服务器响应不是有效的JSON格式，可能是服务器返回了空内容、纯文本、错误页面，或者响应状态码异常。下面是具体的排查和解决步骤：

先排查服务器响应情况
打开浏览器F12开发者工具，切换到「Network」标签，重新触发这个请求，找到add-user的请求条目：
- 看「Status」栏：如果是404、500这类错误码，说明服务器的/add-user路由不存在或者内部报错，先修复服务器端的接口逻辑
- 看「Response」栏：如果是空内容、纯文本或者HTML代码，那res.json()肯定会报错，因为它只能处理JSON格式的数据

修改前端代码，增加状态校验和友好处理
你可以先判断响应是否正常，再尝试解析JSON，同时优化alert的显示（直接alert对象会显示[object Object]，转成字符串才能看到实际内容）：

fetch('http://localhost:3000/add-user', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      name: 'User 1'
    })
  }).then(res => {
    // 先检查请求是否成功（状态码200-299）
    if (!res.ok) {
      throw new Error(`请求失败，状态码：${res.status}`);
    }
    // 再尝试解析JSON
    return res.json();
  })
  .then(data => alert(JSON.stringify(data)))
  .catch(error => alert(`错误信息：${error.message}`))

服务器端必须返回有效的JSON
不管请求成功还是失败，服务器都要返回标准的JSON内容，并且设置响应头Content-Type: application/json。比如成功时返回：
```
{"success": true, "message": "用户添加成功"}
```
失败时返回：
```
{"success": false, "error": "用户已存在"}
```