HTML表单提交报Cannot POST / 无法存入MySQL数据库问题求助

• 1. 重复定义路由导致逻辑不生效
     你定义了两次app.post('/')路由，Express会按代码顺序匹配路由，第一个app.post('/', urlencodedParser...)已经处理了POST请求并返回响应，你写了数据库插入逻辑的第二个app.post('/')永远不会被执行。同时你也重复定义了两次app.get('/')路由，属于冗余错误。
• 2. 静态文件优先级高于路由
     你配置了express.static托管public目录，如果public目录下存在index.html文件，Express会优先处理静态文件，POST请求发送到静态文件路径时就会返回Cannot POST /错误。
• 3. MySQL连接配置错误
     MySQL连接的host参数不能加https://前缀，直接填域名或者IP即可，且默认MySQL端口为3306，如果你服务器的MySQL端口不是默认值需要额外加port参数配置。同时root用户默认禁止远程连接，建议单独创建授权的MySQL用户用于远程连接。
• 4. 前端表单字段名与后端取值不匹配
     前端表单input的name属性分别为fname、lname、email，但后端错误使用input的id属性fn、ln取值，body-parser只会按name属性解析参数，导致你取不到提交的字段值。
• 5. SQL语法错误&安全隐患
     拼接SQL语句时email字段没有加单引号包裹，会触发SQL语法错误，且直接拼接用户输入的参数会导致SQL注入漏洞，需要使用参数化查询。
• 6. 数据库连接逻辑错误
     每次处理完POST请求就调用connection.end()关闭连接，第二次提交表单时会没有可用的数据库连接。建议使用连接池管理数据库连接，不要单次请求就关闭连接。

第一步：清理冗余文件和路由 #

删除public目录下的index.html文件，删掉代码里重复定义的app.get('/')和第一个app.post('/')，仅保留一个处理POST请求的路由。

第二步：修正MySQL连接配置 #

用连接池替换原有单次连接逻辑，去掉host的协议前缀：

// 替换原有数据库连接代码
var pool  = mysql.createPool({
  connectionLimit : 10,
  host            : 'www.blackanthemltd.site', // 移除https://前缀
  user            : 'root', // 生产环境建议替换为单独授权的非root用户
  password        : 'Mynameisabayomi1.',
  database        : 'bal'
});

第三步：修正参数取值和SQL语句 #

正确按前端name属性取值，使用参数化查询避免语法错误和注入风险：

// 唯一的POST路由，挂载urlencodedParser中间件
app.post('/', urlencodedParser, function(req,res){
  console.log(req.body);
  // 按前端input的name属性取参数
  var params = [req.body.fname, req.body.lname, req.body.email];
  // 参数化查询，注意替换括号里的字段名和你表的实际字段名一致
  var sql = "insert into users (first_name, last_name, email) values (?, ?, ?)";
  pool.query(sql, params, function (error, results) {
    if (error) throw error;
    console.log('插入成功，记录ID：', results.insertId);
    res.render('Home', { title: 'Data Saved', message: 'Data Saved successfully.'})
  });
})

第四步：删除冗余代码 #

删掉原有代码里的connection.end()调用，连接池会自动管理连接生命周期，无需手动关闭。

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