Problems with Bodyparse on Node.JS using Express (data like POST)

Question

Hi, guys!

I am starting my studies in Node and React-Native and I am facing some problems in data transaction in front POST method for my API.

I had a similar problem with headers, but I was able to fix (suddenly it worked), and this with the data is more worrying.

The following is as follows: When I use Axios to perform a request with the data, the Node body receives in a completely messed up way the object I cannot manipulate it. I’ve been standing at this point for a long time and I don’t know what to do.

Below is the function I use to send the request:

verifyLogin = () => {
    console.log(this.state)
    axios({
        method: 'post',
        url: 'http://192.168.26.166:3000/users/authenticate',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        data: {
            username: 'teste',
            password: '123',
        },
        json: true,
    }).then((data) => {
        console.log(data)
    }).catch(error => {
        console.error(error.response)
    })
}

The object that reaches the API stays that way:

{ '{"username":"teste","password":"123"}': '' }

And this is where I get the dice on the route /authenticate:

app.post('/authenticate', (req, res) => {
   console.log(3)

    knex = database(LEGACY_DATABASE)

    const { username, password } = req.body
    console.log(req.body)
    console.log(4)
})

And before that I have the file that redirects to the route file, where you have bodyParse:

const express = require('express')
const app = express()
const routes = require('./routes/routes')
var cors = require('cors')

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


const PORT = 3000

app.set('x-powered-by', false)

app.listen(PORT, () => {
    console.log(`Magic happens on port ${PORT}`)
})

app.use('*', (req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*")
    res.header("Access-Control-Allow-Headers", "*")
    console.log(req)
    next()
})

app.use('/', routes)

Could someone help me with the problem?

Picture of the event here

Answer 1

Oops ! Axios already fills the header automatically in front-end, so you can use a more streamlined type syntax:

axios.post('http://192.168.26.166:3000/users/authenticate', data)

BACKEND: you applied the :

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

lacked the:

app.user(bodyParser.json())

So Backend will be able to interpret the received json.