React注册表单POST提交失败排查：Node.js对接SQL接口异常

你的POST请求失效主要有以下几个核心问题：

1. 路由路径不匹配 #

表单的action指向/mainApp，但后端的POST接口是/mainApp/insert，两者路径不一致，导致请求无法命中正确的处理逻辑。

2. 重复发起请求+请求格式不兼容 #

handleSubmit里先调用了handdleData()（注意拼写错误：应为handleData），之后又调用document.getElementById("signUpForm").submit()，相当于发起了两次POST请求：

• 第一次是fetch发起的JSON格式请求
• 第二次是表单默认的application/x-www-form-urlencoded格式请求
  后端只处理JSON格式的话，第二次请求会导致req.body为空；同时两次请求也会造成逻辑混乱。

3. handleData缺少URL参数 #

调用handdleData()时没有传入目标URL，导致fetch的请求地址无效。

4. 后端可能未配置JSON解析中间件 #

如果express后端没配置express.json()，无法解析JSON格式的请求体，会导致req.body为空。

修复步骤 #

步骤1：修正路由路径与请求逻辑 #

移除表单的action和method属性，完全通过fetch处理提交，避免重复请求：

修改后的表单代码

<form onSubmit={this.handleSubmit} id="signUpForm">
    ...
    <button type="submit" className="btn btn-primary">
          Sign Up
    </button>
</form>

步骤2：修正handleSubmit方法 #

修正拼写错误，传入正确的URL，去掉表单默认提交逻辑：

修改后的handleSubmit方法

handleSubmit = async (event) => {
    event.preventDefault();
    ...
    // 修正拼写错误，传入后端接口URL
    await this.handleData('/mainApp/insert');
    // 移除表单默认提交，避免重复请求
    // document.getElementById("signUpForm").submit();
}

步骤3：确保后端配置JSON解析中间件 #

在server.js开头添加以下代码，解析JSON格式的请求体：

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

// 必须添加这个中间件，否则无法解析JSON请求体
app.use(express.json());

// 你的其他路由和逻辑...
app.post('/mainApp/insert', async (req, res) => {
    console.log('Insert called');
    const result = await dbOperation.showVals('email', req.body.email);
    console.log(result.rows.length);
    if (result.rows.length > 0) {
        console.warn('Duplicate email address');
        res.send({ errorPresent: true, errorMessage: 'Duplicate email address' });
    } else {
        console.log('Inserting', req.body.id_, req.body.firstName, req.body.lastName, req.body.email, req.body.password);
        await dbOperation.insertVals(req.body.id_, req.body.firstName, req.body.lastName, req.body.email, req.body.password);
        res.send({ errorPresent: false, errorMessage: 'No error' });
    }
});

步骤4：验证请求与响应 #

提交表单后，查看浏览器控制台的newData输出，同时查看后端控制台的日志，确认请求是否命中/mainApp/insert路由，以及req.body是否能正确获取到参数。

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