React通过Axios向Node/Express提交数据到MySQL无报错无数据如何排查

核心问题出在Express服务端代码的逻辑错误，同时存在几处容易导致问题的疏漏：

明确问题点 #

• SQL占位符数量不匹配：你需要插入4个字段（strName、dtmDOB、strEmail、strPassword），但SQL语句的VALUES后只写了2个?占位符，会直接导致SQL执行失败。
• 服务端未返回响应：接口处理逻辑中，无论SQL执行成功还是失败，都没有给前端返回任何响应，会导致Axios请求一直处于pending状态，不会触发成功回调，也无法暴露错误。
• 前端缺少错误捕获：仅写了请求成功的回调，没有添加错误捕获逻辑，就算请求出错也看不到任何提示，无法排查问题。
• 可能存在跨域拦截：如果React前端运行端口不是4000，服务端没有配置CORS的话，请求会被浏览器跨域策略拦截。

修复后的代码 #

服务端代码 #

首先安装cors依赖处理跨域：npm install cors

const cors = require('cors');
// 全局注册中间件，注意放在接口定义之前
app.use(cors());
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

app.post("/api/insert", (req, res) => {
  const userName = req.body.userName;
  const userDOB = req.body.userDOB;
  const userEmail = req.body.userEmail;
  const userPassword = req.body.userPassword;

  // 修复占位符数量为4个，和插入字段一一对应
  const sqlInsert = "INSERT INTO tblUser (strName,dtmDOB,strEmail,strPassword) VALUES (?,?,?,?)";
  db.query(
    sqlInsert,
    [userName, userDOB, userEmail, userPassword],
    (err, result) => {
      if (err) {
        console.log('SQL执行错误：', err);
        // 返回错误响应给前端
        return res.status(500).json({ error: '数据插入失败', detail: err });
      }
      console.log("record added");
      // 返回成功响应给前端
      return res.json({ msg: '记录插入成功', data: result });
    }
  );
});

客户端代码 #

const [userName, setUserName] = useState("");
const [userPassword, setUserPassword] = useState("");
const [userEmail, setEmail] = useState("");
const [userDOB, setUserDOB] = useState("");

const submitForm = () => {
  Axios.post("http://localhost:4000/api/insert", {
    userName: userName,
    userDOB: userDOB,
    userEmail: userEmail,
    userPassword: userPassword,
  }).then(() => {
    alert("提交成功");
  }).catch(err => {
    // 控制台打印错误信息，方便排查
    console.error('请求错误：', err);
    alert("提交失败，请检查控制台报错信息");
  });
};

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