Vite React注册表单提交报错er_empty_query(状态码200)求助

使用Vite搭建React项目，提交注册表单时出现er_empty_query错误，状态码为200，注册功能无法正常运行。

相关代码 #

Auth控制器代码 #

import {db} from "../db.js";
import bcrypt from 'bcryptjs'

export const studiosignup = (req,res) => {
    //CHECK EXISTING USER
    const q = "SELECT * FROM users WHERE email = ? or username = ?"

    db.query(q,[req.body.email, req.body.username], (err,data)=>{
        if(err) return res.json(err)
        if(data.length) return res.status(409).json('User already exist!');

        //Hash the password and create a user
        const salt = bcrypt.genSaltSync(10);
        const hash = bcrypt.hashSync(req.body.password, salt);

        const q = "INSERT INTO users(`fullname`,`username`,`number`,`email`,`password`,`confirmpassword`) VALUES (?)"

        const values = [
            req.body.fullname,
            req.body.username,
            req.body.number,
            req.body.email,
            hash,
            req.body.confirmpassword, 
        ]

        db.query(q[values], (err,data)=>{
            if(err) return res.json(err);
            return res.status(200).json('User has been created')
        })
    });
};

export const studiologin = (req,res) => {
    
}

export const studiologout = (req,res) => {
    
}

Auth路由代码 #

import express  from "express";
import { studiosignup, studiologin, studiologout } from "../controllers/auth.js"

const router = express.Router()

router.post('/signup', studiosignup)
router.post('/login', studiologin)
router.post('/logout', studiologout)

export default router

Vite代理配置 #

server:{
    proxy: {
        '/server':'http://localhost:3000'
    },
}

React注册表单代码 #

const StudioSignup = () => {
    const [inputs, setInputs] = useState({
        fullname: '',
        username: '',
        number: '',
        email: '',
        password: '',
        confirmpassword: '',
    });


    const handleChange = e => {
        setInputs(prev=>({...prev, [e.target.name]: e.target.value}))
    }

    const handleSubmit = async e => {
        e.preventDefault();
        try{
            const res = await axios.post("/server/auth/signup", inputs)
            console.log(res)
        }catch(err){
            console.log(err)
        }
       console.log(inputs)
        
    }


  return (
    <section className='signup'>

        <div className='container-signup' id='container-signup'>
        <div className='form-signup'>
                   <div className='signin'>
                        <span className="title">Signup</span>

                        <form>

                            <div className='user-details'>
                                
                                <div className="input-box">
                                    <input type="text" 
                                    
                                    name='fullname' 
                                    onChange={handleChange}
                                    placeholder="Enter your fullname" required/>
                                    <i className="fa-solid fa-user icon"></i>
                                </div>

                                <div className="input-box">
                                    <input type="text" 
                                  
                                    name='username'
                                    onChange={handleChange}
                                     placeholder="Enter your username" required/>
                                    <i className="fa-solid fa-user icon"></i>
                                </div>

                                <div className="input-box">
                                    <input type="text" 
                                    
                                    name='email'
                                    onChange={handleChange}
                                    placeholder="Enter your email" required/>
                                    <i className="fa-solid fa-envelope icon"></i>
                                </div>

                                <div className="input-box">
                                    <input type="text" 
                                    
                                    name='number'
                                    onChange={handleChange}
                                    placeholder="Enter your number" required/>
                                    <i className="fa-solid fa-phone icon"></i>
                                </div>

                                <div className="input-box">
                                    <input type="password" 
                                    
                                    name='password'
                                    onChange={handleChange} 
                                    className="pswrd" 
                                    placeholder="Create a password"  required/>
                                    <span className="toggleBtn" id="toggleBtn"></span>
                                    <i className="fa-solid fa-lock icon"></i>
                                </div>

                                <div className="input-box">
                                    <input type="password" 
                                    
                                    name='confirmpassword' 
                                    onChange={handleChange}
                                    placeholder="Confirm password" required/>
                                    <i className="fa-solid fa-lock icon"></i>
                                </div>

                                

                                <div className='gender-details'>
                                    <input type="radio" name="gender" id="dot-1"/>
                                    <input type="radio" name="gender" id="dot-2"/>
                                    <input type="radio" name="gender" id="dot-3"/>

                                        
                                    <span className="gender-title">Gender</span>
                                    <div className='gender-category'>
                                        <label htmlFor="dot-1">
                                            <span className='dot one'></span>
                                            <span className="gender">Male</span>
                                        </label>

                                        <label htmlFor="dot-2">
                                            <span className="dot two"></span>
                                            <span className="gender">Female</span>
                                        </label>

                                        <label htmlFor="dot-3">
                                            <span className="dot three"></span>
                                            <span className="gender">Prefer not to say</span>
                                        </label>

                                    </div>
                                </div>

                                    <div className='checklast'>
                                        <div className='checkbox-text'>
                                            <div className='checkbox-content'>
                                                <input type="checkbox" id="logcheck"/>
                                                <label htmlFor="logcheck" className="text">Accept all terms & conditions</label>
                                            </div>
                                        </div>

                                                
                                            <div className='signup-btn'>
                                                <button 
                                                    onClick={handleSubmit}
                                                >Signup Now</button>
                                            </div>
                                    </div>

核心错误原因 #

er_empty_query错误源于SQL查询语句为空，问题出在Auth控制器的插入数据代码中：

db.query(q[values], (err,data)=>{...})

这里错误使用q[values]，q是字符串类型的SQL语句，用数组索引会返回undefined，导致传入db.query的第一个参数为空，触发空查询错误。

修复步骤 #

1. 修正SQL查询调用
   将插入数据的db.query调用改为正确参数格式：

db.query(q, [values], (err,data)=>{
    if(err) return res.json(err);
    return res.status(200).json('User has been created')
})

db.query的正确参数顺序是：SQL语句、参数数组、回调函数。

2. 可选优化：移除重复的确认密码存储
   数据库无需存储confirmpassword，应先验证两次密码一致性，再仅存储加密后的密码：

• 后端验证示例：

if(req.body.password !== req.body.confirmpassword) {
    return res.status(400).json('Passwords do not match!');
}
// 修改INSERT语句和参数数组
const q = "INSERT INTO users(`fullname`,`username`,`number`,`email`,`password`) VALUES (?)"
const values = [
    req.body.fullname,
    req.body.username,
    req.body.number,
    req.body.email,
    hash
]

3. 确保Express解析JSON请求体
   检查后端主文件是否添加express.json()中间件，否则无法获取req.body：

import express from 'express';
const app = express();
app.use(express.json()); // 必须添加此中间件

4. 表单提交逻辑优化
   将表单按钮类型改为submit，或直接在form标签绑定onSubmit事件：

<form onSubmit={handleSubmit}>
<!-- 或按钮改为submit类型 -->
<button type="submit">Signup Now</button>

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