向服务器发送数据时request.body.mySearch返回undefined的解决方法

原因分析 #

前端通过FormData发送的请求，Content-Type为multipart/form-data，而Express框架默认仅解析application/json和application/x-www-form-urlencoded格式的数据，没有内置处理multipart/form-data的中间件，因此request.body无法被正确解析，导致request.body.mySearch返回undefined。

解决方案一：使用multer解析FormData #

1. 安装multer依赖

npm install multer

2. 在server.js中引入并配置multer，修改路由：

const express = require('express');
const multer = require('multer');
const app = express();

// 初始化multer，无需磁盘存储（仅处理文本字段）
const upload = multer();

// 路由中使用upload.none()中间件解析文本类型的FormData
app.post('/laptops', upload.none(), function(request, response){
  let laptopBrand = request.body.mySearch;
  console.log(laptopBrand);
});

解决方案二：前端改用urlencoded格式发送数据 #

如果不需要上传文件，可以改为发送application/x-www-form-urlencoded格式，兼容Express默认的解析中间件：

前端修改代码： #

//display the searched laptop
function searchProducts(){
    let search = document.getElementById("laptopSearched").value;
    console.log("Search_Value " + search);
 
    // 使用URLSearchParams构建参数
    const params = new URLSearchParams();
    params.append('mySearch', search);

    let request = new XMLHttpRequest();
    request.open("POST", "/laptops");
    // 设置Content-Type
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // 发送参数
    request.send(params);
}

后端确保已配置urlencoded中间件： #

const express = require('express');
const app = express();

// 解析urlencoded格式的数据
app.use(express.urlencoded({ extended: true }));

app.post('/laptops', function(request, response){
  let laptopBrand = request.body.mySearch;
  console.log(laptopBrand);
});

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