Express接口提交Bootstrap表单数据至MySQL为空问题求助

我在向MySQL数据库提交表单数据时遇到问题：请求能到达数据库，但插入的数据全是空值。希望表单中填写的信息能正常存入数据库。

后端POST接口代码 #

app.post("/productos", async (req, res) => {
    try {
        const { nombre, precio, urlImagen, categoria } = req.body;
        console.log("Datos del formulario:", req.body);

        const connection = await database.getConnection();
        const result = await connection.query("INSERT INTO producto (nombre, precio, urlImagen, categoria) VALUES (?, ?, ?, ?)", [nombre, precio, urlImagen, categoria]);

        if (result.affectedRows > 0) {
            res.json({ message: "Producto agregado correctamente" });
        } else {
            res.status(500).json({ error: "Error al agregar el producto" });
        }
    } catch (error) {
        console.error(error);
        res.status(500).json({ error: "Internal Server Error" });
    }
});

前端Bootstrap模态框表单代码 #

<div class="modal-body">
            <form action="http://localhost:4000/productos" method="post">
                <!-- Campo de Producto -->
                <div class="form-group">
                    <label for="producto">Producto</label>
                    <input type="text" class="form-control" id="producto" name="nombre" placeholder="Nombre del Producto" required>
                </div>
                <!-- Campo de Precio -->
                <div class="form-group">
                    <label for="precio">Precio</label>
                    <input type="text" class="form-control" id="precio" name="precio" placeholder="Precio del Producto" required>
                </div>
                <!-- Campo de Imagen -->
                <div class="form-group">
                    <label for="imagen">Imagen</label>
                    <input type="text" class="form-control" id="imagen" name="urlImagen" placeholder="URL de la Imagen" required>
                </div>
                <!-- Campo de Categoría -->
                <div class="form-group">
                    <label for="categoria">Categoría</label>
                    <input type="text" class="form-control" id="categoria" name="categoria" placeholder="Categoría del Producto" required>
                </div>
                <!-- Botón para enviar el formulario -->
                <button type="submit" class="btn btn-primary">Guardar Producto</button>
            </form>
        </div>

问题现象 #

请求能触发数据库的插入操作，但插入的nombre、precio、urlImagen、categoria字段均为空值。

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