Search code examples
reactjsexpressformik-material-ui

Express Router Call where the data is coming back undefined


I keep getting data: undefined on my axios call to my route in express via nodemon.

axios({
                method: "POST",
                url:"http://localhost:8080/oracle2/search",
                headers: {"Content-Type" : "application/json;charset=utf-8"},
                data: {customer_number: values.custNumber.toString(), last_name: values.last_name}


            })
            .then(console.log('Axios Callback'))
          }

This is my route oracle2:

router.post('/search', (req, res)=> {
    router.use(cors());
    router.use(bodyParser.json({ type: 'application/json' }))
    router.use(bodyParser.urlencoded({ extended: false, type: 'application/json' })) 

console.log(`The data: ${req.body}`)
res.sendStatus(200)

})

The post man looks like this:

Headers:

Host: localhost:8080
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:84.0) Gecko/20100101 Firefox/84.0
Accept: application/json, text/plain, */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: http://localhost:3000/
Content-Type: application/json;charset=utf-8
Content-Length: 51
Origin: http://localhost:3000

Body looks like this:

{"customer_number":"120231546","last_name":"Smith"}

Any help would be appreciated. React front end with Formik values as the input


Solution

  • This route is incorrect:

    router.post('/search', (req, res)=> {
        router.use(cors());
        router.use(bodyParser.json({ type: 'application/json' }))
        router.use(bodyParser.urlencoded({ extended: false, type: 'application/json' })) 
    
        console.log(`The data: ${req.body}`)
        res.sendStatus(200)
    });
    

    This is not at all how you use middleware. You don't define router.use() statement inside a route handler. That won't work properly and it will define them over and over again every time the route is run too, causing them to build up for ever. Usually, you would apply this type of middleware globally or across many routes by putting these:

    router.use(cors());
    router.use(bodyParser.json({ type: 'application/json' }))
    router.use(bodyParser.urlencoded({ extended: false, type: 'application/json' })) 
    

    Outside any route handler such as this:

    router.use(cors());
    router.use(bodyParser.json({ type: 'application/json' }));
    router.use(bodyParser.urlencoded({ extended: false, type: 'application/json'})); 
    
    router.post('/search', (req, res)=> {
        console.log('The data:', req.body);
        res.sendStatus(200);
    });
    

    Or, if you really wanted the middleware in force for only one route, then you would do this:

    router.post(
        '/search', 
        bodyParser.json({ type: 'application/json' }),
        bodyParser.urlencoded({ extended: false, type: 'application/json'}),
        (req, res)=> {
          console.log('The data:', req.body);
          res.sendStatus(200);    
    });
    

    Note, I've also changed how you output the contents of req.body because it will be an object and this will actually show the contents of the object in the console.