MERN栈待办列表开发：React前端遇JSON解析错误求助

这个错误的核心原因是：前端请求/api/todos时，后端返回的不是预期的JSON数据，而是HTML页面（比如404错误页、React的index.html或者服务器错误页），导致response.json()解析失败。下面是具体的排查和修复步骤：

1. 确认后端路由的挂载路径 #

在你的Express主文件（通常是server.js或app.js）中，必须将routes.js挂载到/api前缀下，否则前端请求/api/todos会匹配不到正确的路由，返回404 HTML页面：

const express = require('express');
const routes = require('./routes');
const app = express();

// 必须添加这一行，确保路由前缀为/api
app.use('/api', routes);

// 其他必要中间件配置
app.use(express.json());

2. 修复connectToDb的集合获取逻辑 #

你的router.get("/todos")中，db应该指向MongoDB的集合对象，而不是数据库实例。如果connectToDb返回的是数据库对象，需要先获取对应集合：

router.get("/todos", async (req,res)=>{
    const db = await connectToDb();
    // 替换成你的待办事项集合名称，比如"todos"
    const todosCollection = db.collection('todos');
    const getTodo = await todosCollection.find().toArray();
    res.status(200).json(getTodo);
});

如果connectToDb没有正确返回数据库/集合，db.find()会抛出错误，后端返回500错误页的HTML，导致前端解析失败。

3. 前端添加响应状态检查 #

在前端fetch逻辑中，先检查响应是否成功，避免在错误状态下解析JSON：

async function getTodos(){
  const response = await fetch("/api/todos");
  // 检查响应状态码是否在200-299之间
  if (!response.ok) {
    const errorText = await response.text();
    console.error("请求失败:", response.status, errorText);
    return;
  }
  const todos = await response.json();
  setTodos(todos);
}

这能帮你快速看到后端返回的具体内容（比如错误HTML），定位问题。

4. 修复后端代码的语法/逻辑错误 #

你的后端路由存在几处错误，会导致服务器报错并返回HTML：

• POST路由：const {todo} = req.body;声明的todo是常量，不能重新赋值，修改为：

  // 替换todo = JSON.stringify(todo);
  const stringifiedTodo = JSON.stringify(todo);
  let insertedTodo = await todosCollection.insertOne({todo: stringifiedTodo, status:false});
  

• PUT路由：存在拼写错误（totdo）和updateOne参数错误，正确写法：

  router.put("/todos/:id",async (req,res) => {
      const db = await connectToDb();
      const todosCollection = db.collection('todos');
      const {status} = req.body;    
  
      if(typeof status !== "boolean"){
          return res.status(400).json({msg:"invalid status type!"});
      }
  
      const updateTodo = await todosCollection.updateOne(
          { _id: new ObjectId(req.params.id) }, // 用URL参数中的ID匹配待办项
          { $set: { status: !status } } // 正确的更新操作
      );
      res.status(200).json(updateTodo);
  });
  

5. 配置CORS（如果前后端端口不同） #

如果前端运行在http://localhost:3000，后端在http://localhost:5000，需要安装并配置CORS中间件，避免跨域请求被拦截：

npm install cors

然后在Express主文件中添加：

const cors = require('cors');
app.use(cors());

完成以上步骤后，重新启动前后端服务器，应该就能正确获取JSON数据并渲染了。

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