使用app.post处理XMLHttpRequest（Node.js+Express）：获取前端传值问题

背景 #

我正在构建一个带复选框的筛选功能，需求是让复选框触发脚本，将DOM数据发送至服务器。

现有代码 #

HTML代码 #

<div class="container-modal-1-item-1">
  <label class="checkboxContainer">
    <input name="checkboxOne" type="checkbox" onchange="filterWords(this)">
    <span class="checkmark"></span>
    People
  </label>
</div>

前端脚本代码 #

function filterWords(){
  if(document.getElementsByName('checkboxOne')[0].checked){
    console.log("Is Checked");
    const xhr = new XMLHttpRequest()
    var data = document.getElementsByClassName('checkboxContainer')[0].textContent;
    xhr.open("POST", "/filter", true);
    console.log(data);
    xhr.send(data);
  } else {
    console.log("Is Not Checked");
  }
}

服务器端代码（Express） #

app.post("/filter", function(req, res){
  console.log(data);
  res.redirect("/");
})

当前问题 #

前端console.log(data)能正确输出"People"，但通过XMLHttpRequest发送请求后，服务器端无法获取这个data值，该如何解决？

解决方案 #

1. 前端完善请求配置 #

直接发送纯文本数据时，需要告知服务器数据格式，同时优化DOM查询逻辑提升效率：

function filterWords(checkbox) {
  if(checkbox.checked){
    console.log("Is Checked");
    const xhr = new XMLHttpRequest();
    // 利用传入的checkbox元素直接关联对应的label，避免重复DOM查询
    const label = checkbox.closest('.checkboxContainer');
    // 去除文本前后空白字符，保证数据干净
    const data = label.textContent.trim();
    
    xhr.open("POST", "/filter", true);
    // 设置请求头，明确告知服务器发送的是纯文本格式
    xhr.setRequestHeader('Content-Type', 'text/plain');
    console.log(data);
    xhr.send(data);
  } else {
    console.log("Is Not Checked");
  }
}

2. 服务器端配置请求体解析中间件 #

Express框架默认不会自动解析纯文本、表单或JSON类型的请求体，需要添加对应中间件处理：
首先在Express应用的初始化代码中添加中间件：

// 配置中间件，用于解析纯文本格式的请求体
app.use(express.text());

然后修改路由代码，通过req.body获取前端发送的数据：

app.post("/filter", function(req, res){
  // req.body即为前端发送的"People"数据
  console.log(req.body);
  res.redirect("/");
})

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