JSON解析错误：无法识别token '<' 问题排查与解决求助

这个Syntax error: JSON parse error: unrecognized token '<'错误的核心是前端尝试解析非JSON格式的响应，而<是HTML标签的起始符，说明后端返回的是HTML页面（比如错误页、404页）或非JSON文本，而非预期的JSON数据。结合你的场景，具体原因如下：

• 后端错误分支返回格式不规范：后端catch块用res.send(error)返回错误时，会将Error对象转为text/html格式，而非JSON，前端调用res.json()解析就会触发报错。
• 报错页面传入的id无效：正常页面用了有效id，后端能查到数据并返回JSON；报错页面的id不存在或格式错误，触发后端catch分支，返回了非JSON内容。
• 后端状态码使用不规范（次要）：GET请求成功返回201 Created不符合HTTP规范，201用于创建资源的POST请求，GET成功应使用200 OK，虽不直接导致解析错误，但会造成语义混乱。

1. 修复后端错误处理逻辑 #

将后端catch块改为返回JSON格式错误信息，并设置正确的状态码：

app.get('/getuser/:id', async (req, res) => {
  try {
    const { id } = req.params
    console.log(id);
    const peruserdata = await getschema.findById(id);
    // 未查到数据时主动返回404错误
    if (!peruserdata) {
      return res.status(404).json({ error: '用户不存在' });
    }
    res.status(200).json(peruserdata); // 修正状态码为200
  } catch (error) {
    console.error(error);
    // 返回JSON格式的错误信息
    res.status(500).json({ error: '服务器内部错误', details: error.message });
  }
})

2. 前端增加响应状态检查 #

在解析JSON前先判断响应是否正常，避免解析非JSON内容：

const getdata = async () => {
  try {
    const res = await fetch(`http://192.168.43.220:8000/getuser/${id}`, {
      method: "GET",
      headers: {
        "Content-Type": "application/json"
      },
    })

    // 先检查响应状态是否正常
    if (!res.ok) {
      const errorData = await res.json();
      throw new Error(errorData.error || `请求失败：${res.status}`);
    }

    const data = await res.json();
    console.log(data);
    if (!data) {
      window.alert('获取数据为空')
    } else {
      setdata(data) // 注意：后端返回的是用户数据对象，直接用data即可，若后端确实有costomer字段可保留原写法
      console.log('API获取数据成功');
    }

  } catch (e) {
    console.log(e);
    window.alert(e.message)
    window.alert("获取数据失败")
  }
}

提示：前端代码中data.costomer可能是拼写错误，后端返回的是peruserdata（用户数据对象），请根据实际字段调整。

3. 排查报错页面的id参数 #

确认报错页面传入的id是否符合数据库id规则（比如MongoDB的ObjectId格式）、是否存在于数据库中。可以在前端调用getdata前打印id值，或在后端打印id后验证有效性。

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