Express提交post表单时获取req.body.title报undefined错误如何解决

问题原因 #

Express 默认不会解析POST请求的请求体内容，你没有配置对应的请求体解析中间件，所以req.body默认值为undefined，读取undefined的title属性就会触发你遇到的报错。

解决方法 #

Express 4.16.0及以上版本（当前主流版本） #

在app.js文件中，路由定义之前添加express.urlencoded中间件配置即可，修改后的代码参考：

const http= require('http');
const path= require('path');

const express= require('express');

const app= express();

app.set('view engine', 'ejs');
app.set('views', 'Views');

app.use(express.static(path.join(__dirname, 'Public')));
// 新增解析表单请求体的中间件，必须放在路由定义之前
app.use(express.urlencoded({ extended: true }));

app.get('/', (req, res, next)=>{
    res.render('shop');
});

app.get('/admin', (req, res, next)=>{
    res.render('admin');
});

app.get('/add-product', (req, res, next)=>{
    res.render('addProduct');
});

app.post('/add-product', (req, res, next)=>{
    console.log(req.body.title);
    res.redirect('/');
});

app.listen(3000);

Express 4.16.0以下版本 #

需要单独安装body-parser依赖再配置：

1. 执行安装命令：npm install body-parser
2. 在app.js中添加配置：

const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));

配置说明 #

• 上述中间件专门用来解析普通form表单提交的application/x-www-form-urlencoded格式数据
• extended: true参数支持解析嵌套结构的表单数据，常规表单场景使用该配置即可

修改完成后重启服务，再次提交表单就能正常获取req.body.title的值。

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