如何解决“Failed to execute 'json' on 'Response': body stream already read”错误？

一、前端错误修复 #

1. 解决Response Body重复读取错误 #

你两次调用await response.json()，但Response的body流仅能读取一次，第二次调用必然报错。修复方式是先解析一次并缓存结果：

let response = await api.registerUser(data);
// 仅解析一次，复用结果
const responseData = await response.json();

if (response.status === 200) {
    const {data, token} = responseData;
    let obj = {};
    obj.token = token;
    obj.first = data.first;
    dispatch(login(obj))
    setSaved(true)
    props.next()
} else {
    message.error({
        content: (<AlertMessage title="Error" content={responseData.message} status="error"/>),
        className: 'custom-class custom_message_container',
        icon: (<></>),
        duration: 2
    });
}

2. 修复语法与逻辑错误 #

• 移除多余括号：setLoading(true) ) 改为 setLoading(true)
• 修正变量解构：const {firste = values; 改为 const { firstName } = values;（对应Form.Item的name="firstName"），同时FormData的append改为data.append("first", firstName);
• 修正Form组件属性：encType="multipart/form-date" 改为 encType="multipart/form-data"
• 删除冗余的表单提交监听：onFinish本身就是表单提交的处理函数，无需再给form绑定submit事件，直接删除该段监听代码

二、后端错误修复 #

1. 修正变量名错误 #

后端代码中定义了firstName但打印first，导致变量未定义：

let firstName = req.body.first;
console.log(firstName);
res.send(`Your firstName is: ${firstName}`);

2. 添加MongoDB数据存储逻辑 #

当前后端仅打印数据，无写入数据库的代码，这是MongoDB仅创建空文件夹的核心原因。假设你已有User模型，添加存储逻辑：

// 引入你的User模型
const User = require('./models/User');

app.post("/backend/endpoint/v6", upload.none(), v6, async (req, res) => {
    try {
        let firstName = req.body.first;
        console.log(firstName);
        // 创建用户并写入MongoDB
        const newUser = new User({ firstName });
        await newUser.save();
        // 返回前端需要的JSON格式响应
        res.status(200).json({
            data: { firstName },
            token: "此处替换为你的token生成逻辑"
        });
    } catch (err) {
        res.status(500).json({ message: `保存用户失败：${err.message}` });
    }
});

3. 解析multipart/form-data格式请求 #

bodyParser.json()和bodyParser.urlencoded()无法处理FormData格式，需使用multer中间件：

• 安装依赖：npm install multer
• 配置并使用中间件：

const multer = require('multer');
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

// 在路由中添加upload.none()解析文本字段
app.post("/backend/endpoint/v6", upload.none(), v6, async (req, res) => {
    // 业务逻辑...
});

三、额外注意事项 #

• 若前端api.registerUser是axios封装的，无需手动设置Content-Type: multipart/form-data，axios会自动适配
• 确保require('./config/mongo')已成功建立MongoDB连接

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