React连接MongoDB出现JSON.parse错误，请求排查解决

我复制了教程里的React连接MongoDB代码，严格按步骤操作后，出现错误：Uncaught runtime errors: ERROR JSON.parse: unexpected character at line 1 column 1 of the JSON data。所有JSON格式都正确且和示例一致，朋友做同样操作没遇到问题。代码曾偶然成功向MongoDB Compass发送数据，但恢复工作代码后失效。我没用到JSON.parse，附上前后端代码，请求排查解决。

前端代码（App.js） #

import { useState } from 'react'

function App() {
    const [name, setName] = useState("");
    const [email, setEmail] = useState("");

    const handleOnSubmit = async (e) => {
        e.preventDefault();
        let result = await fetch(
            'http://localhost:3001/register', {
                method: "post",
                body: JSON.stringify({ name, email }),
                headers: {
                    'Content-Type': 'application/json'
                }
            }
        );
        result = await result.json();
        console.warn(result);
        if (result) {
            alert("Data saved successfully");
            setEmail("");
            setName("");
        }
    };

    return (
        <>
            <h1>This is React WebApp</h1>
            <form action="">
                <input type="text" placeholder="name" value={name} onChange={(e) => setName(e.target.value)} />
                <input type="email" placeholder="email" value={email} onChange={(e) => setEmail(e.target.value)} />
                <button type="submit" onClick={handleOnSubmit}>Submit</button>
            </form>
        </>
    );
}

export default App;

后端代码（backend/index.js） #

// 连接MongoDB数据库
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/', {
    dbName: 'yourDB-name',
    useNewUrlParser: true,
    useUnifiedTopology: true
}, err => err ? console.log(err) : console.log('Connected to yourDB-name database'));

// 用户数据模型Schema
const UserSchema = new mongoose.Schema({
    name: {
        type: String,
        required: true,
    },
    email: {
        type: String,
        required: true,
        unique: true,
    },
    date: {
        type: Date,
        default: Date.now,
    },
});

const User = mongoose.model('users', UserSchema);
User.createIndexes();

// 初始化Express服务
const express = require('express');
const app = express();
const cors = require("cors");

console.log("App listen at port 3001");

app.use(express.json());
app.use(cors());

app.get("/", (req, resp) => {
    resp.send("App is Working");
});

app.post("/register", async (req, resp) => {
    try {
        const user = new User(req.body);
        let result = await user.save();
        result = result.toObject();
        if (result) {
            delete result.password;
            resp.send(req.body);
            console.log(result);
        } else {
            console.log("User already register");
        }
    } catch (e) {
        resp.send("Something Went Wrong");
    }
});

app.listen(3001);

注：我并没有使用JSON.parse()

问题排查与修复方案 #

错误根源 #

前端调用result.json()时，后端返回的不是合法JSON格式。比如当后端进入catch块（如邮箱重复、数据库连接异常等），会用resp.send("Something Went Wrong")返回纯文本字符串，前端尝试将其解析为JSON就会触发解析错误。

具体修复步骤 #

1. 后端统一返回JSON格式响应
   无论成功还是失败，都用resp.json()返回JSON数据，避免纯文本导致的解析错误：

   app.post("/register", async (req, resp) => {
       try {
           const user = new User(req.body);
           let result = await user.save();
           result = result.toObject();
           resp.json({ success: true, data: req.body });
           console.log(result);
       } catch (e) {
           // 处理邮箱重复的唯一索引错误
           if (e.code === 11000) {
               resp.status(400).json({ success: false, message: "邮箱已被注册" });
           } else {
               resp.status(500).json({ success: false, message: "服务端出错", error: e.message });
           }
       }
   });
   

2. 前端增加错误处理逻辑
   捕获请求异常和非成功响应，避免因后端错误导致的前端崩溃：

   const handleOnSubmit = async (e) => {
       e.preventDefault();
       try {
           const response = await fetch('http://localhost:3001/register', {
               method: "post",
               body: JSON.stringify({ name, email }),
               headers: {
                   'Content-Type': 'application/json'
               }
           });
           // 检查响应状态是否正常
           if (!response.ok) {
               throw new Error(`HTTP错误状态码: ${response.status}`);
           }
           const result = await response.json();
           console.warn(result);
           if (result.success) {
               alert("数据保存成功");
               setEmail("");
               setName("");
           } else {
               alert(result.message);
           }
       } catch (err) {
           console.error("请求失败:", err);
           alert("请求出错，请检查后端服务是否正常运行");
       }
   };
   

3. 基础环境检查

   • 确认本地MongoDB服务正在运行，可通过mongod命令启动或检查服务状态
   • 核对后端数据库名称yourDB-name是否正确，MongoDB Compass中是否存在该数据库
   • 重启前后端服务，清除浏览器缓存，避免旧的响应数据干扰

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