Node.js+SQL登录注册系统报错：req.body.email无法解构（未定义）

核心错误原因 #

Cannot destructure property 'email' of 'req.body' as it is undefined 这个报错的本质是你的Express后端没有配置JSON请求体解析中间件，前端通过Fetch发送的JSON格式数据无法被后端解析，导致req.body始终为undefined。

分步修复方案 #

1. 启用Express的JSON解析中间件

在你的Express主入口文件（比如app.js或server.js）中添加以下代码，确保在挂载路由之前配置：

const express = require('express');
const app = express();

// 解析JSON格式的请求体
app.use(express.json());
// 解析urlencoded格式的请求体（可选，兼容表单默认提交格式）
app.use(express.urlencoded({ extended: true }));

// 挂载你的注册路由
const registerApi = require('./routes/api/register'); // 替换为你的实际路径
app.use('/api', registerApi);

2. 修正前端DOM元素获取逻辑

确保你正确获取了表单输入元素，避免因变量未定义导致发送空数据：

const form = document.getElementById('form');
const error = document.getElementById('error');
const success = document.getElementById('success');

form.addEventListener("submit",() => {
    // 显式获取输入元素
    const emailInput = document.getElementById('email');
    const passwordInput = document.getElementById('password');
    
    const register = {
        email: emailInput.value.trim(),
        password: passwordInput.value.trim()
    };

    fetch("/api/register", {
        method: "POST",
        body: JSON.stringify(register),
        headers: {
            "Content-Type": "application/json"
        }
    }).then(res => res.json()).then(data => {
        if(data.status === "error") {
            success.style.display = "none";
            error.style.display = "block";
            error.innerText = data.error;
        } else {
            success.style.display = "block";
            error.style.display = "none";
            success.innerText = data.success;
        }
    }).catch(err => {
        // 添加错误捕获，处理网络请求失败的情况
        success.style.display = "none";
        error.style.display = "block";
        error.innerText = "请求失败，请重试";
    })
})

3. 修复后端bcrypt异步哈希问题

bcrypt.hash是异步函数，必须用await获取哈希结果，否则会把Promise对象存入数据库：

const db = require("../routes/db-config");
const bcrypt = require('bcryptjs');

const register = async(req, res) =>{
    const { email, password: Npassword } = req.body; // 用解构更简洁

    if(!email || !Npassword) {
        return res.json({ status: "error", error: "请输入邮箱和密码" });
    }

    try {
        // 检查邮箱是否已存在
        const [existingUser] = await db.promise().query('SELECT email FROM data WHERE email = ?', [email]);
        if(existingUser.length > 0) {
            return res.json({ status: "error", error: "该邮箱已被注册" });
        }

        // 异步哈希密码
        const hashedPassword = await bcrypt.hash(Npassword, 8);
        // 插入用户数据
        await db.promise().query("INSERT INTO data SET ?", { email: email, password: hashedPassword });
        
        return res.json({ status: "success", success: "用户注册成功" });
    } catch (err) {
        console.error(err);
        return res.json({ status: "error", error: "服务器内部错误" });
    }
}

module.exports = register;

注：这里改用了db.promise()来支持async/await，避免嵌套回调，代码更易读。

4. 其他细节修正

• 前端响应处理中，原代码错误地给error.innerText赋值了data.success，改为success.innerText = data.success；
• 后端响应的status字段必须是字符串，原代码中status: success是未定义变量，要改成status: "success"；
• 添加try/catch捕获数据库操作异常，避免服务器崩溃。

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