Why does req.body return an empty object in console in POST request?-CodePudding

In my code below, the middleware is supposed to return the parsed data in console as an object accessed by req.body, but it returns an empty object for some reason.

Code and Console Snapshot1 Code and Console Snapshot2

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
const { use } = require('express/lib/application');


/*
 ulrEncodedParser middleware is used to invoke below function 
 to parse posted data to POST functions
 var urlEncodedParser = bodyParser.urlencoded({extended : false});
 var jsonParser = bodyParser.json();
 */

//set view engine to be able to visit views 
app.set('view engine', 'ejs');

//middleware for styles to be loaded on pages when req made by views
app.use('/stylesheets', express.static('stylesheets'));

// middleware to parse application/x-www-form-urlencoded
//app.use(bodyParser.urlencoded({ extended: false }));

// middleware to parse application/json
//app.use(bodyParser.json());

app.use(express.json());
app.use(express.urlencoded({ extended: false }));


//GET "/" req, fires up home page
app.get('/', function(req, res){
    res.render('home');

});

//GET "/home" req, aslo fires up home page
app.get('/home', function(req, res){
    res.render('home');

});

//GET "/signup" req, fires up sign up page
app.get('/signup', function(req, res){
    res.render('signup');

});

//POST information enetered on sign up form
app.post('/signup', function(req, res){
    
    console.log(req.body);
    
    //res.render('signup-success', req.body);
});

//server to run on port 3000
app.listen(3000, function(){
    console.log('server listening on port 3000');
});

I also tried initialize two separate variables where the functions of urlencoded() and bodyParser.json() can be accessed var for both middlewares instead of using app.use() middleware this way:

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

and then pass in each in the app.post() request routed to the signup page but it still returns the same, empty.

Here is my signup.ejs as well for reference.

<!DOCTYPE html>
<html>
    <head>
        <link href="/stylesheets/style.css" rel="stylesheet" type="text/css" />
        <title>Sign Up Page</title>
    </head>
    <body>
        <h1>Sign Up</h1>
        <h3>Enter the requested information below for your user profile to be created.</h3><br>
        <form id="signup-form" action="/signup" method="post">
            <label for="firstName">First Name</label><br>
            <input type="text" id="firstName" placeholder="first name"><br><br>
            <label for="musicPreferences">Music Prefrences</label><br>
            <input type="text" id="musicPrefrence" placeholder="music preferences"><br><br>
            <label for="favoriteArtists">Favorite Artists</label<br>
            <input type="text" id="favoriteArtists" placeholder="favorite artists"><br><br>
            <label for="pastConcerts">Past Concerts Attended</label><br>
            <input type="text" id="pastConcerts" placeholder="concerts attended"><br><br>
            <label for="futureConcerts">Fututre Concerts Want to Attend</label><br>
            <input type="text" id="futureConcerts" placeholder="future concerts"><br><br>
            <input type="submit" value="submit"><br>
            <%- include('partials/nav.ejs') %>  
        </form>
    </body>
</html>

Any help is appreciated!

CodePudding user response：

The backend works correctly because when sending a request with curl, body is shown in the console. It seems the client sends the request incorrectly.

screenshot