Express.js + body-parser：POST请求中的空req.body

Question

I am using Express and body-parser middleware to process incoming requests. On the front end, I have a form that's just a hidden input and a submit button (written in Pug):

form(notes="saveNotesForm" action=`/lessons/${lesson._id}/notes` method="POST" enctype="application/x-www-form-urlencoded")
              input(type="hidden" id="hiddenNotes" name="hiddenNotes" alt="Notes Copy" value="test").notesHidden
              input(type="submit" name="saveNotes" alt="Save Notes" value="Save")

On the backend, I have the Express app using body-parser:

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

And the route processing the incoming request:

router.post('/lessons/:lessonID/notes', lessonController.updateNotes);

// ... and in lessonController:

exports.updateNotes = async (req, res) => {
  console.log('updateNotes request received');
  console.log(req.body);
  res.status(200).json({ status: 'success' });
}

When I try to use req.body in updateNotes , the body is an empty object, but should at least have the property hiddenNotes with the value "test" . Please comment if you have any questions or think you see the problem!

[UPDATED]

This was a silly mistake, I forgot I had written a separate event handler for when this form gets submitted - it just took me posting on SO before I went through all of my code :) The event handler uses axios and looks like this:

const SaveNotesButton = $('form.saveNotes');
SaveNotesButton.on('submit', ajaxSaveNotes);

function ajaxSaveNotes(e) {
  e.preventDefault();
  axios
    .post(this.action)
    .then(res => {
      console.log(res.data);
    })
    .catch(console.error);
}

Unfortunately, when making post s with axios, you need to include the data in an object like this, or else it won't be included in the request:

const SaveNotesButton = $('form.saveNotes');
SaveNotesButton.on('submit', ajaxSaveNotes);

function ajaxSaveNotes(e) {
  e.preventDefault();
  axios
    .post(this.action, { notes: this.children.hiddenNotes.value }) // Data added here
    .then(res => {
      console.log(res.data);
    })
    .catch(console.error);
}

Answer 1

必须尝试使用​​Postman或类似工具查询终点吗？

Answer 2

There could be one possible explanation for why your req.body is undefined. Are you sure your app.use(bodyParser.json()) and app.use(bodyParser.url... are written before your app.use('***', router) lines? If you put the body parser middleware AFTER your router middleware it essentially won't get called because middleware are called in the order they are put in app.use . So you should place your bodyParser before all your router logic. BodyParser middleware then calls all the other middleware (with the req.body populated) that come after it including all your router level middleware.

Hope it helps!

Answer 3

Not sure how you are defining your routes but I would expect a post route to look like the following:

const express = require('express');
const app = express();
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());

app.post('/lessons/:lessonID/notes', (req, res) => {
    // now pass the req object to your function
    lessonController.updateNotes(req);
});

You need to pass the req object to your function to be able to access req.body...