React+Express+MySQL登录注册系统Axios 404错误求助

问题现象 #

前端React的Home.jsx通过Axios发送POST请求到Express后端时，收到错误：AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', ...}

核心原因 #

1. 端口不匹配：前端请求的是localhost:3000，但后端Express服务实际运行在3001端口（代码中PORT = process.env.PORT || 3001），导致请求端点不存在。
2. 后端响应逻辑错误：res.send()被重复调用，会触发Express报错；登录接口中直接判断if(result)不准确（MySQL查询返回的是数组，即使无数据也是空数组，永远为真）。
3. 潜在数据库问题：未处理MySQL连接失败的情况，且注册/登录SQL语句可能存在表结构不匹配问题。

解决方案步骤 #

1. 修正前端请求端口 #

将前端Axios请求地址中的端口改为后端实际运行的3001。

2. 修复后端响应逻辑 #

• 每个接口中res.send()只能调用一次，避免重复响应。
• 登录接口中判断查询结果是否有数据，需检查数组长度。
• 增加MySQL连接错误处理。

3. 验证数据库表结构 #

确保account表存在email和password字段，且字段类型与插入数据匹配。

修正后的代码 #

前端Home.jsx（关键部分） #

const register = () => {
  const data = {email: emailReg, password: passwordReg};
  // 修改端口为3001
  axios.post("http://localhost:3001/register", data).then((response) => {
    console.log(response.data);
  }).catch(err => console.log(err)); // 增加错误捕获
};

const login = () => {
  const data = {email: email, password: password};
  // 修改端口为3001
  axios.post("http://localhost:3001/login", data).then((response) => {
    console.log(response.data);
  }).catch(err => console.log(err)); // 增加错误捕获
};

后端server.js（完整修正版） #

const express = require("express");
const mysql = require("mysql2");
const cors = require("cors");

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

const PORT = process.env.PORT || 3001;

// 处理MySQL连接错误
const connection = mysql.createConnection({
    user: "root",
    host: "localhost",
    password: "CicadaCode@7",
    database: "lkmadb",
});

connection.connect((err) => {
    if (err) {
        console.error("数据库连接失败:", err);
        return;
    }
    console.log("数据库连接成功");
});

app.post("/register", (req, res) => {
    const { email, password } = req.body;

    // 简单校验参数
    if (!email || !password) {
        return res.status(400).send({message: "邮箱和密码不能为空"});
    }

    connection.query("INSERT INTO account (email, password) VALUES (?,?)", 
    [email, password], (err, result) => {
        if (err) {
            console.error("注册失败:", err);
            return res.status(500).send({err: err.message});
        }
        // 只发送一次响应
        res.send({message: "注册成功", insertId: result.insertId});
    });
});

app.post("/login", (req, res) => {
    const { email, password } = req.body;

    if (!email || !password) {
        return res.status(400).send({message: "邮箱和密码不能为空"});
    }
    
    connection.query("SELECT * FROM account WHERE email =? AND password =?",
    [email, password], (err, result) => {
        if (err) {
            console.error("登录查询失败:", err);
            return res.status(500).send({err: err.message});
        } 
            
        // 判断结果数组是否有数据
        if (result.length > 0) {
            res.send({message: "登录成功", user: result[0]});
        } else {
            res.status(401).send({message: "邮箱或密码错误"});
        }       
    });
});

app.listen(PORT, () => {
    console.log(`Server is listening on port ${PORT}`);
});

额外注意事项 #

• 前端开发环境默认端口是3000，若想统一端口，可以在React项目的package.json中添加"proxy": "http://localhost:3001"，这样请求时可以直接写/register而不用带域名端口。
• 生产环境不要明文存储密码，建议使用bcrypt等库对密码进行哈希加密后再存入数据库。

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