求助：HTML表单提交至Express后端返回空JSON数据问题

问题根源 #

1. HTML表单中的<input>元素缺少name属性：浏览器只会将带有name属性的表单字段数据打包到请求体中，没有name的字段不会被提交。
2. 虽然后端配置了正确的表单数据解析中间件，但无name字段导致请求体本身为空。

解决方案 #

步骤1：为表单输入字段添加name属性

修改HTML代码，给每个需要提交的字段补充name属性（同时修复原代码中未闭合的标签）：

<form action="/data" method="POST">
  <div class="row">
    <div class="col-md-6 mb-3">
      <input type="text" class="form-control" name="carVIN" placeholder="Car VIN" required>
    </div>

    <div class="col-md-6 mb-3">
      <input type="text" class="form-control" name="carMileage" placeholder="Car Mileage" required>
    </div>

    <div class="col-12">
      <div class="custom-control custom-checkbox d-block mb-2">
        <input type="checkbox" class="custom-control-input" id="customCheck2" name="agreeTerms">
      </div> 

      <div class="col-12 col-lg-4"></div>
      <button type="submit" class="btn amado-btn w-100">submit</button>
    </div>
  </div>
</form>

步骤2：确认后端中间件配置

你的后端代码已正确配置了表单数据解析中间件，无需修改：

app.use(express.urlencoded({ extended: false}));

注：bodyParser.json()和express.json()用于解析JSON格式请求体，对表单默认的application/x-www-form-urlencoded格式提交无影响，可保留。

修改完成后提交表单，后端即可通过req.body.carVIN、req.body.carMileage获取对应字段的数据。

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