CODEWITHSUNDEEP
javascriptnode.jsajaxreactjsexpress
Andres V.
Andres V.

Reputation: 73

Express.js : POST data sent as KEY ONLY in my req.body object

I am currently having an issue with my POST request.

I have a simple function that is responsible of sending data to my server using AJAX.

handleSubmit(event) {

var http = new XMLHttpRequest(); // object allwos us to make http requests 

//Lets make a request
http.open("POST", "http://localhost:3000/register", true);//set up the request for us: type of request we want, where we want the data from, do we want it to be sync or async?

http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

//each time the ready state changes on the http object, it will fire this function. 
http.onreadystatechange = function(){
    console.log(http); // lets see the ready state changing... 

    //once the ready state hits 4(request is completed) && status is 200 (which is okay), lets do something with data.
    if(http.readyState == 4 && http.status == 200){

    }else{
      console.log('Error: ' + http.status); // An error occurred during the request.
    }
}

let user = {
  email: "[email protected]"
};

http.send(JSON.stringify(user));
}

My server side code is pretty simple and contains a POST end point. 

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

//Body Parser Middleware
app.use(express.json());
app.use(express.urlencoded({extended: true}))

app.post('/register', (req, res) => {
    console.log(req);
})

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

Now, once handleSubmit fires, the req body of my object becomes the following:

{ '{"email":"[email protected]"}': '' }

I am very confused and I'm not quite sure how to proceed.

Thank you!

Upvotes: 3

Views: 1319

Answers (4)

zouweninthesky
zouweninthesky

Reputation: 1

If it is still relevant, I had similar issue with the parsing. Try adding this:

app.use(express.json());

to your code to enable built-in express body parser that works specifically with json AND changing 'Content-type' to 'application/json'. Right now you're trying to parse request.body of json type as a urlencoded, that's where the new object with request body as key comes from.

Upvotes: 0

Byurhan Beyzat
Byurhan Beyzat

Reputation: 61

I was trying to run this, I've learned a lot. You are sending json object as a data, but content-type is set to application/x-www-form-urlencoded for json data content-type needs to be application/json but somehow it's not working for me.

I made some tests and this is what I ended

const http = new XMLHttpRequest();
const url = "http://localhost:3000/register";

const json = JSON.stringify(user);

http.open("POST", url, true);

// In order to sent JSON you need to set this, but somehow it's not working
// http.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
// http.send(JSON.stringify(user));

// In order to work with this type app, you need to send data as a string like below
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.send('id=1&isAdmin=false&[email protected]')

Upvotes: 0

pawel.codes
pawel.codes

Reputation: 1631

Try {email: "[email protected]", id:1 }

Upvotes: -1

Jeba
Jeba

Reputation: 868

Everything seems to be good, You have to declare the Header as json,

http.setRequestHeader("Content-type", "application/json");

Upvotes: 2

Related Questions