React+MySQL注册功能报错：500内部错误及Cannot GET问题排查

先澄清一个正常现象 #

浏览器地址栏访问http://localhost:8800/api/auth/register显示Cannot GET /api/auth/register是预期行为，因为你的接口只配置了POST请求方法，而浏览器地址栏默认发起GET请求，这个不是问题，注册功能用POST是正确的设计。

500内部服务器错误的排查与修复 #

1. 数据库未建立连接 #

你的connect.js只创建了连接对象，但没有主动发起连接，导致所有数据库操作失败。修改server/connect.js：

import mysql from "mysql"

export const db = mysql.createConnection({
  host:"localhost",
  user:"root",
  password:"password",
  database:"auth"
})

// 新增连接逻辑，验证数据库是否能正常连接
db.connect((err) => {
  if (err) {
    console.error("数据库连接失败:", err);
    return;
  }
  console.log("数据库连接成功!");
});

2. SQL插入语句语法错误 #

auth.js中的INSERT语句使用了错误的关键词VALUE，正确的应该是VALUES（复数形式），这会导致SQL执行失败：

// 原错误语句
// const q = "INSERT INTO users (`username`,`email`,`password`) VALUE (?)";

// 修改为
const q = "INSERT INTO users (`username`,`email`,`password`) VALUES (?)";

3. 检查依赖是否完整安装 #

确保所有依赖包都已正确安装，执行以下命令：

npm install express mysql cors cookie-parser bcryptjs jsonwebtoken

4. 验证数据库表结构 #

确认auth数据库中存在users表，且字段与你插入的字段完全匹配：

• 表名：users
• 字段：username（VARCHAR类型）、email（VARCHAR类型）、password（VARCHAR类型，建议长度至少64位以存储哈希值）

5. 添加错误日志便于排查 #

在服务器端的数据库操作中添加日志，方便定位具体错误：

// 检查用户是否存在的查询
db.query(q, [req.body.username], (err, data) => {
  if (err) {
    console.log("查询用户是否存在错误:", err);
    return res.status(500).json(err);
  }
  // ... 后续逻辑
});

// 插入新用户的查询
db.query(q, [values], (err, data) => {
  if (err) {
    console.log("插入用户错误:", err);
    return res.status(500).json(err);
  }
  return res.status(200).json("用户创建成功");
});

6. 前端开启错误提示 #

取消Register.jsx中错误提示的注释，以便看到服务器返回的具体错误信息：

<p>{err && err}</p>

完成以上步骤后，重启服务器，重新测试注册功能应该就能正常工作了。

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