Masiar
Masiar

Reputation: 21352

Express.js req.body undefined

I have this as configuration of my Express server

app.use(app.router); 
app.use(express.cookieParser());
app.use(express.session({ secret: "keyboard cat" }));
app.set('view engine', 'ejs');
app.set("view options", { layout: true });
//Handles post requests
app.use(express.bodyParser());
//Handles put requests
app.use(express.methodOverride());

But still when I ask for req.body.something in my routes I get some error pointing out that body is undefined. Here is an example of a route that uses req.body :

app.post('/admin', function(req, res){
    console.log(req.body.name);
});

I read that this problem is caused by the lack of app.use(express.bodyParser()); but as you can see I call it before the routes.

Any clue?

Upvotes: 574

Views: 756111

Answers (30)

Bilal Ahmed
Bilal Ahmed

Reputation: 14

we need to use app.use(express.json()) and app.use(express.urlencoded({ extended: true }));

In an Express.js application, the express.json() middleware is used to parse incoming request bodies with JSON payloads. When a client sends data to the server using an HTTP POST request with a Content-Type of application/json, the data is typically sent in the form of a JSON object in the request body.

The express.json() middleware is responsible for parsing this JSON data and making it available in the req.body property of the request object where as urlencoded is used to parse encoded req

Upvotes: 0

Mark Bonano
Mark Bonano

Reputation: 6790

UPDATE July 2020

express.bodyParser() is no longer bundled as part of express. You need to install it separately before loading:

npm i body-parser


// then in your app
var express = require('express')
var bodyParser = require('body-parser')
 
var app = express()
 
// create application/json parser
var jsonParser = bodyParser.json()
 
// create application/x-www-form-urlencoded parser
var urlencodedParser = bodyParser.urlencoded({ extended: false })
 
// POST /login gets urlencoded bodies
app.post('/login', urlencodedParser, function (req, res) {
  res.send('welcome, ' + req.body.username)
})
 
// POST /api/users gets JSON bodies
app.post('/api/users', jsonParser, function (req, res) {
  // create user in req.body
})

See here for further info

original follows

You must make sure that you define all configurations BEFORE defining routes. If you do so, you can continue to use express.bodyParser().

An example is as follows:

var express = require('express'),
    app     = express(),
    port    = parseInt(process.env.PORT, 10) || 8080;

app.configure(function(){
  app.use(express.bodyParser());
});

app.listen(port);
    
app.post("/someRoute", function(req, res) {
  console.log(req.body);
  res.send({ status: 'SUCCESS' });
});

Upvotes: 639

Anmol Pal
Anmol Pal

Reputation: 125

Use either of the two:

  1. app.use(express.json());

  2. app.use(bodyParser.json());

Incase of the 2nd option.

npm i body-parser

const bodyParser = require("body-parser");

Upvotes: 7

MbaiMburu
MbaiMburu

Reputation: 915

In cases where bootstrap classes are used in form definition,getting rid of those classes first helped resolve the issue. I had struggled for some time only to find out the class php-email-form was the culprit.

 <form action="/route/login" method="POST" class="php-email-form row justify-content-center">

Upvotes: -1

Merrin K
Merrin K

Reputation: 1780

Try This

npm i multer --save
const express = require('express');
const multer  = require('multer');
const upload = multer();
const app = express();

app.post('/test', upload.any(), (req, res) => {
  console.log('data', req.body);
  res.setHeader('Content-Type', 'application/json');
  res.send(req.body);
});

Upvotes: -1

TechTurtle
TechTurtle

Reputation: 3167

Express 4, has built-in body parser. No need to install separate body-parser. So below will work:

export const app = express();
app.use(express.json());

Upvotes: 198

CHANDAN KUMAR
CHANDAN KUMAR

Reputation: 99

Updated: October 2022

First check or add the body parser using below step:

step :1 import bodyParser from 'body-parser';

step 2: app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json());

step 3: most important router shoud be define below of body parser that is the main reason for body undefined....

import noteRouter from "./src/routes/category_routes.js";

app.use(noteRouter);

whatever you name define in router depends on you..

Hope this help you guyz

Upvotes: 3

Hicham Mounadi
Hicham Mounadi

Reputation: 469

As I get the same problem, although I know BodyParser is no longer used and I already used the app.use(express.json()) the problem was {FOR ME}: I was placing

app.use(express.json())

after

app.use('api/v1/example', example) => { concerns the route }

once I reorder those two lines;

1 - app.use(express.json())

2 - app.use('api/v1/example', example)

It worked perfectly

Upvotes: 6

Đăng Khoa Đinh
Đăng Khoa Đinh

Reputation: 5411

The question is answered. But since it is quite generic and req.body undefined is a frequent error, especially for beginners, I find this is the best place to resume all that I know about the problem.


This error can be caused by the following reasons:

1. [SERVER side] [Quite often] Forget or misused parser middleware

  • You need to use appropriate middleware to parse the incoming requests. For example, express.json() parses request in JSON format, and express.urlencoded() parses request in urlencoded format.
const app = express();
app.use(express.urlencoded())
app.use(express.json())

You can see the full list in the express documentation page

  • If you can't find the right parser for your request in Express (XML, form-data...), you need to find another library for that. For example, to parse XML data, you can use this library

  • You should use the parser middleware before the route declaration part (I did a test to confirm this!). The middleware can be configured right after the initialization express app.

  • Like other answers pointed out, bodyParser is deprecated since express 4.16.0, you should use built-in middlewares like above.

2. [CLIENT side] [Rarely] Forget to send the data along with the request

  • Well, you need to send the data...

To verify whether the data has been sent with the request or not, open the Network tabs in the browser's devtools and search for your request.

  • It's rare but I saw some people trying to send data in the GET request, for GET request req.body is undefined.

3. [SERVER & CLIENT] [Quite often] Using different Content-Type

  • Server and client need to use the same Content-Type to understand each other. If you send requests using json format, you need to use json() middleware. If you send a request using urlencoded format, you need to use urlencoded()...

  • There is 1 tricky case when you try to upload a file using the form-data format. For that, you can use multer, a middleware for handling multipart/form-data.

  • What if you don't control the client part? I had a problem when coding the API for Instant payment notification (IPN). The general rule is to try to get information on the client part: communicate with the frontend team, go to the payment documentation page... You might need to add appropriate middleware based on the Content-Type decided by the client part.

Finally, a piece of advice for full-stack developers :)

When having a problem like this, try to use some API test software like Postman. The object is to eliminate all the noise in the client part, this will help you correctly identify the problem.

In Postman, once you have a correct result, you can use the code generation tool in the software to have corresponded code. The button </> is on the right bar. You have a lot of options in popular languages/libraries... enter image description here

Upvotes: 42

John Nico Novero
John Nico Novero

Reputation: 655

UPDATE 2022

You can just use.

app.use(express.json())

const express = require('express')
const app = express();
const PORT = process.env.PORT || 3001

// Calling the express.json() method for parsing
app.use(express.json())


app.listen(PORT, () => {
    console.log(`============ API Gateway is open at ${PORT} ============= `)
})

express.json() is a built-in middleware function in Express. This method is used to parse the incoming requests with JSON payloads and is based upon the bodyparser.

This method returns the middleware that only parses JSON and only looks at the requests where the content-type header matches the type option.

express.json vs bodyParser.json

Upvotes: 4

Firsl of all, ensure you are applying this middleware (express.urlencoded) before routes.

let app = express();

//response as Json
app.use(express.json()); 

//Parse x-www-form-urlencoded request into req.body
app.use(express.urlencoded({ extended: true }));     

app.post('/test',(req,res)=>{
    res.json(req.body);
});

The code express.urlencoded({extended:true}) only responds to x-www-form-urlencoded posts requests, so in your ajax/XMLHttpRequest/fetch, make sure you are sending the request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); header.

Thats it !

Upvotes: 9

Prashanth K
Prashanth K

Reputation: 361

app.use(express.json());

It will help to solve the issue of req.body undefined

Upvotes: 36

What I did in my case is that I declared app.use(express.json()); app.use(express.urlencoded({ extended: false })); before my routes, and the issue got solved. I hope this helps you too!

Upvotes: 0

Vatsal A Mehta
Vatsal A Mehta

Reputation: 430

Use this line for appropriate parsing at the top before any get or post request is made:

app.use(express.json()) 

This parses json data to Javascript Objects.

Upvotes: 5

Greggory Wiley
Greggory Wiley

Reputation: 961

In express 4 and above you don't need body parser they have their own json parse method, At the higehset level of your express app add

var express = require('express');
var app = express()
app.use(express.json()); //declare this to receive json objects.

Other answers failed to mention, when making the request to express via fetch or other clients. The request must be formatted a certain way.

const response = await fetch(`${expressAddress}/controller/route`, { 
      method: 'POST', // *GET, POST, PUT, DELETE, etc.
      headers: {
          'Content-Type': 'application/json' //this must be set to a json type
      },
      body: JSON.stringify(row) //regular js object need to be converted to json
  })

If you make the fetch request like this the req.body will output your json object as expected.

Upvotes: 4

Mayur
Mayur

Reputation: 5053

History:

Earlier versions of Express used to have a lot of middleware bundled with it. bodyParser was one of the middleware that came with it. When Express 4.0 was released they decided to remove the bundled middleware from Express and make them separate packages instead. The syntax then changed from app.use(express.json()) to app.use(bodyParser.json()) after installing the bodyParser module.

bodyParser was added back to Express in release 4.16.0, because people wanted it bundled with Express like before. That means you don't have to use bodyParser.json() anymore if you are on the latest release. You can use express.json() instead.

The release history for 4.16.0 is here for those who are interested, and the pull request is here.

Okay, back to the point,

Implementation:

All you need to add is just add,

app.use(express.json());
app.use(express.urlencoded({ extended: true}));
app.use(app.router); // Route will be at the end of parser

And remove bodyParser (in newer version of express it is not needed)

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

And Express will take care of your request. :)

Full example will looks like,

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

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

app.post('/test-url', (req, res) => {
    console.log(req.body)
    return res.send("went well")
})

app.listen(3000, () => {
    console.log("running on port 3000")
})

Upvotes: 9

ANKIT MISHRA
ANKIT MISHRA

Reputation: 606

You have to check following things for that:-
1. app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json
app.use(bodyParser.json())
Implement body parser in your app.

2. Check headers in postman its should be based on your rest api's, like if your Content-Type: application/json it should be defined in your postman headers.

Upvotes: 1

Marci
Marci

Reputation: 314

When I use bodyParser it is marked as deprecated. To avoid this I use the following code with express instead of bodyParser.

Notice: the routes must declared finally this is important! Other answers here described the problem well.

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

const routes = require('./routes/api');

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

// Routes must declared finally
app.use('/', routes);

Upvotes: 4

Sohaib Ahmad
Sohaib Ahmad

Reputation: 19

Okay This may sound Dumb but it worked for me.

as a total beginner, I didn't realized that writing:

router.post("/", (res, req) => {
  console.log(req.body);
  req.send("User Route");
});

is wrong !

You have make sure that you pass parameters(req,res) of post/get in right order: and call them accordingly:

router.post("/", (req, res) => {
  console.log(req.body);
  res.send("User Route");
});

Upvotes: -3

Sonali Mangrinda
Sonali Mangrinda

Reputation: 219

The middleware is always used as first.

//MIDDLEWARE
app.use(bodyParser.json());
app.use(cors());    
app.use(cookieParser());

before the routes.

//MY ROUTES
app.use("/api", authRoutes);

Upvotes: 11

Ank_247shbm
Ank_247shbm

Reputation: 542

Simple example to get through all:

Express Code For Method='post' after Login:

This would not require any such bodyParser().

enter image description here

app.js

const express = require('express');
const mongoose = require('mongoose');
const mongoDB = require('mongodb');

const app = express();

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

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

app.post('/admin', (req,res) => {
 console.log(JSON.stringify(req.body.name));
 res.send(JSON.stringify(req.body.name));
});

app.listen(3000, () => {
 console.log('listening on 3000');
});

admin.ejs

<!DOCTYPE Html>
<html>
 <head>
  <title>Admin Login</title>
 </head>
 <body>
   <div>
    <center padding="100px">
       <form method="post" action="/admin">
          <div> Secret Key:
            <input name='name'></input>
          </div><br></br><br></br>
          <div>
            <button type="submit" onClick='smsAPI()'>Get OTP</button>
          </div>
       </form>
    </center>
    </div >
</body>
</html>

You get input. The 'name' in "" is a variable that carries data through method='post'. For multiple data input, name='name[]'.

Hence,

on name='name' 

input: Adu
backend: "Adu"

OR

input: Adu, Luv,
backend: "Adu, Luv,"

on

name='name[]'
input: Adu,45689, ugghb, Luv
backend: ["Adu,45689, ugghb, Luv"]

Upvotes: 2

Rushikesh Shelke
Rushikesh Shelke

Reputation: 73

In my case, it was because of using body-parser after including the routes.

The correct code should be

app.use(bodyParser.urlencoded({extended:true}));
app.use(methodOverride("_method"));
app.use(indexRoutes);
app.use(userRoutes);
app.use(adminRoutes);

Upvotes: 5

Saran
Saran

Reputation: 1383

Mine was a text input and I'm adding this answer here regardless so it would help people. Make sure your encoding is set when parsing! I struggled to make it work until I set a proper value to it.

This was the error I was getting without using any parser:

error info: TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object.

Received an instance of undefined at Function.from (buffer.js:327:9)

We do not have to use body-parser now in Express as others have already mentioned, but just that app.use(express.text()); did not solve my issue.

undefined now changed to Object. According to Express documentation, request body returns an empty object ({}) if Content-Type doesn't match (among others).

error info: TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object.

Received an instance of Object at Function.from (buffer.js:327:9)

The encoding type you set needs to be on point as well. In my case, it was text/plain. You can change it to suit your needs like JSON, etc. I did this and voila! Worked like a charm!

app.use(express.text({
    type: "text/plain" 
}));

Upvotes: 3

Gerardo Bautista
Gerardo Bautista

Reputation: 891

in Express 4, it's really simple

const app = express()
const p = process.env.PORT || 8082

app.use(express.json()) 

Upvotes: 7

ANIK ISLAM SHOJIB
ANIK ISLAM SHOJIB

Reputation: 3238

Most of the time req.body is undefined due to missing JSON parser

const express = require('express');
app.use(express.json());

could be missing for the body-parser

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

and sometimes it's undefined due to cros origin so add them

const cors = require('cors');
app.use(cors())

Upvotes: 11

Abdesselam
Abdesselam

Reputation: 1011

Add in your app.js

before the call of the Router

const app = express();
app.use(express.json());

Upvotes: 43

Badr Bellaj
Badr Bellaj

Reputation: 12821

adding express.urlencoded({ extended: true }) to the route solves the problem.

router.post('/save',express.urlencoded({ extended: true }),  "your route");

Upvotes: 1

lendoo
lendoo

Reputation: 543

Another possible way to get empty request.body when you forget the name attribute from the input element...

<input type="text" /> /* give back empty request.body -> {}*/
<input type="text" name="username" /> /* give back request.body -> {"username": "your-input"} */

Upvotes: 2

lmb
lmb

Reputation: 341

For anyone who none of the answers above have worked for I had to enable cors between my front-end and express.

You can do this either by:

  1. Downloading and turning on a CORS extension for your browser, such as:

    https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

    for Chrome,

or by

  1. Adding the lines

    var cors=require('cors');
    
    app.use(cors());
    

to your express app.js page. (After npm install cors)

Upvotes: 2

LEMUEL  ADANE
LEMUEL ADANE

Reputation: 8818

Latest version of Express already has body-parser built-in. So you can use:

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

Upvotes: 4

Related Questions