使用Express/Node/React时遇JSON错误，求解决方案

嘿，这个错误我帮不少人排查过，其实本质很直白：你的React前端在尝试把Express/Node后端返回的内容解析成JSON，但后端返回的根本不是有效的JSON——那个开头的"P"就是关键线索，说明返回的是一段以P开头的纯文本（比如"Permission denied"、"Please check your input"这类提示），甚至可能是某个HTML错误页面。

下面是一步步排查和解决的方法，亲测有效：

第一步：先搞清楚后端到底返回了啥 #

别着急直接解析JSON，先在你的React请求代码里把后端返回的原始内容打出来看看。比如用fetch的话，可以这么改：

fetch('/your-api-endpoint')
  .then(res => res.text()) // 先拿原始文本，不是直接json()
  .then(rawContent => {
    console.log('后端返回的原始内容:', rawContent);
    // 再尝试转JSON看看
    try {
      const parsedData = JSON.parse(rawContent);
      console.log('解析成功的JSON:', parsedData);
    } catch (err) {
      console.error('解析JSON失败原因:', err);
    }
  })
  .catch(reqErr => console.error('请求本身出错:', reqErr));

这样你就能一眼看到那个"P"到底来自哪里——是权限提示？还是某个拼写错误的错误消息？

第二步：检查你的Express后端代码 #

绝大多数情况，问题出在后端没有正确返回JSON：

• 你用了res.send()而不是res.json()：比如你想返回权限错误，写了res.send('Permission denied')，这时候后端返回的是纯文本，前端转JSON肯定炸。正确的做法是用res.json()返回JSON格式的响应，哪怕是错误：

  app.get('/your-api-path', (req, res) => {
    if (!req.isAuthenticated()) {
      // 返回带状态码的JSON错误
      return res.status(403).json({ error: 'Permission denied' });
    }
    // 正常返回数据也用json()
    res.json({ data: 'your expected content' });
  });
  

• 后端抛出了未捕获的错误，返回了HTML错误页：Express默认的错误处理会返回一个HTML页面，如果你自定义了错误提示，也可能是一段纯文本。要确保所有API路由的错误都用JSON格式返回。
• 路由路径不匹配：你请求的路径和后端定义的路由对不上，导致后端返回了404的HTML页面或者自定义的404文本。

另外别忘了检查后端有没有加express.json()中间件——如果没加，后端无法解析前端发送的JSON请求体，可能也会返回错误文本。

第三步：给前端加个兜底处理 #

就算后端保证返回JSON，网络波动或者其他意外也可能导致解析失败，所以一定要在前端代码里加异常处理，避免出现"Unhandled Rejection"：

// 用async/await写法更清晰
async function fetchYourData() {
  try {
    const response = await fetch('/your-api-endpoint');
    // 先检查响应状态是否正常（2xx）
    if (!response.ok) {
      const errorMsg = await response.text();
      throw new Error(`请求失败: ${response.status} - ${errorMsg}`);
    }
    const data = await response.json();
    // 处理拿到的数据
    console.log('拿到数据:', data);
  } catch (error) {
    console.error('出问题了:', error);
    // 这里可以给用户显示友好的错误提示
  }
}

额外提示：对照教程查细节 #

你说跟着教程还是出错，大概率是漏了某个小细节：

• 确认前后端的端口是否匹配，有没有跨域问题（虽然跨域错误一般不是P开头，但也有可能）
• 检查教程里的API路径是不是和你写的完全一致，比如教程里是/api/posts你写成了/posts
• 看看教程里的后端有没有设置CORS中间件（比如cors包），如果没加，浏览器可能会拦截请求返回错误文本

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