如何在Express API中打印通过JavaScript发送的FormData数据？

我通过JavaScript发送POST请求到Express API，但不知道如何在API端打印接收到的数据。

我的尝试 #

app.post("/register", (req,res) => {
    res.render("register/register", {});
    // 我试过用req.query、req.params或req.body打印，比如console.log(req.query)
})

前端JS代码 #

document.querySelector("#regForm").addEventListener('submit', e => {
    e.preventDefault();
    let username = document.querySelector("#username").value;

    let formData = new FormData(document.querySelector("#regForm"));
    
    console.log([...formData]);

    let data = JSON.stringify([...formData]);
    console.log(data)
        
    const request = new XMLHttpRequest();
    request.open("POST", '/register');
    request.send(data);
})

完整API代码 #

const express = require("express");
const path = require("path");
var bodyParser = require('body-parser')

const app = express();
const port = process.env.POST || "8080";

var jsonParser = bodyParser.json()
var urlencodedParser = bodyParser.urlencoded({ extended: false })

app.listen(port, () => {
    console.log(`Running on port ${port}`);
})
// middleware & static files
app.use(express.static('public'));
app.use(express.json());

app.set("view engine", "ejs");

app.use(express.static(__dirname + '/src'));
app.get("/profile/:name", (req,res) => {
    res.render("profile", {username:req.params.name});
})

app.get("/register", (req,res) => {
    res.render("register/register", {});
})

app.post("/register", jsonParser, (req,res) => {
    res.render("register/register", {});
    console.log(req.body)
})

遇到的错误 #

调整后出现JSON解析错误，无法正确解析请求体。

解决方案 #

1. 修复前端请求格式 #

你当前把FormData转成数组再序列化，生成的JSON格式不符合后端解析要求，同时没有设置正确的请求头。修改前端代码如下：

document.querySelector("#regForm").addEventListener('submit', e => {
    e.preventDefault();
    const formData = new FormData(document.querySelector("#regForm"));
    // 将FormData转为键值对对象
    const dataObj = Object.fromEntries(formData);
    // 序列化为JSON字符串
    const jsonData = JSON.stringify(dataObj);
    
    const request = new XMLHttpRequest();
    request.open("POST", '/register');
    // 必须设置请求头，告知后端请求体是JSON格式
    request.setRequestHeader('Content-Type', 'application/json');
    request.send(jsonData);
})

2. 简化后端中间件配置 #

Express已经内置了body-parser的功能，确保express.json()中间件在路由之前加载即可，无需在路由上重复指定jsonParser参数：

修改后端的POST路由：

app.post("/register", (req,res) => {
    // 先打印接收的数据再响应
    console.log("接收到的数据：", req.body);
    res.render("register/register", {});
})

验证 #

重启Express服务，重新提交表单，此时后端控制台应该能正确打印出前端发送的表单数据。

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