React提交注册表单fetch报Unexpected token P in JSON at position 0问题

报错的核心原因是前后端响应格式不匹配：

• 前端逻辑中，不管接口返回成功还是失败，都会统一调用response.json()方法，尝试把响应体解析为JSON格式
• 首次提交时，用户信息校验通过，服务端正常执行完用户数据保存逻辑后，调用res.send("Posted successfully")返回纯文本内容，响应体开头字符是P，不符合JSON格式要求，因此前端解析时报错Unexpected token P in JSON at position 0
• 由于服务端是在完成数据存储后才返回响应，所以即使前端解析报错，首次提交的用户数据已经成功写入数据库
• 第二次提交时，邮箱已存在触发服务端校验异常，进入catch分支调用res.json({error: e.message})返回标准JSON结构，前端可以正常解析，因此能正确拿到错误提示

1. 统一服务端响应格式 #

将注册成功的返回逻辑从纯文本改为JSON结构，和错误场景的返回格式保持一致：

// 服务端路由原代码
// return res.send("Posted successfully");
// 替换为
return res.json({ message: "注册成功" });

2. 修复服务端隐藏BUG #

当前服务端创建用户的逻辑中，password字段被错误赋值为email，会导致用户密码存储错误，后续无法正常登录：

// 原错误代码
// const user = new User({
//     name: name,
//     email: email,
//     password: email
// })
// 修改为
const user = new User({
    name: name,
    email: email,
    password: password
})

3. 前端兼容优化（可选） #

如果无法保证服务端所有接口都返回JSON，可以在前端增加响应格式兼容逻辑，避免类似解析错误：

// 替换原来的 const data = await response.json();
const rawResponse = await response.text();
let data;
try {
  data = JSON.parse(rawResponse);
} catch (err) {
  // 非JSON格式响应统一封装处理
  data = { message: rawResponse };
}

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