Sending data from react server to node server

Question

I am trying to send the data from input boxes in react server to nodejs server but everytime i am getting error on backend

TypeError: Cannot read property 'email' of undefined

Here is my code for that

onformsubmit=()=>{
console.log(this.state.email,this.state.password) ///gets printed correctly

axios.post('http://localhost:5000/acc-details',{
  email:this.state.email,
  password:this.state.password
})
.then(response=>{
  console.log('success')
})
.catch(err=>console.log(err))
}

and then in node server

const express=require('express')
const app=express()
var bodyparser=require('body-parser')
app.use(bodyparser.json())

router.post('/acc-details',(req,res)=>{
    console.log(req.body.email)
    res.send('ok')
})

if not consoling in node server i am getting response back 'ok' as writtten above but i want to fetch my email and password on node server for db authentication

you have router.post('...') in here but you are putting bodyparser.json() on app.use(). typo? if not, change router. to app. — Deryck
– Deryck, Commented Nov 30, 2019 at 8:17
It is better to test your server with tools like postman to determine if your server code is faulty or front-end. — Mohammad Nazari
– Mohammad Nazari, Commented Nov 30, 2019 at 10:05

jogesh_pi · Accepted Answer · 2019-11-30 08:18:15Z

1

Modify your Axios request slightly to send multipart/form-data data.

onformsubmit = () => {

    // Collect properties from the state
    const {email, password} = this.state;

    // Use FormData API
    var formdata = new FormData();
    formdata.append('email', email);
    formdata.append('password', password);

    axios.post('http://localhost:5000/acc-details', formdata)
    .then( response=> {
        console.log('success')
    })
    .catch(err=>console.log(err))
}

answered Nov 30, 2019 at 8:18

jogesh_pi

9,7745 gold badges40 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

RRR uzumaki Over a year ago

it says formdata is not defined on server side :(

jogesh_pi Over a year ago

@Ratnabhkumarrai Make sure you have implemented this on client-side, formdata should not accessible to server-side.

RRR uzumaki Over a year ago

what should i console on server to check ?

Alessio Marchi · Accepted Answer · 2019-11-30 09:33:01Z

0

onformsubmit=()=>{
console.log(this.state.email,this.state.password) ///gets printed correctly
axios({
  url: 'http://localhost:5000/acc-details'
  method: 'POST',
  data: { email: this.state.email, password: this.state.password } 
})
.then(response=>{
  console.log('success')
})
.catch(err=>console.log(err))
}

Now you should be able to access req.body

Edit:

after 200 tries, i figured out:

axios({
      url: "http://localhost:5000/acc-details",
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
      },
      data: { email: this.state.email, password: this.state.password }
    });```

edited Nov 30, 2019 at 9:33

answered Nov 30, 2019 at 8:28

Alessio Marchi

5841 gold badge5 silver badges10 bronze badges

6 Comments

RRR uzumaki Over a year ago

on server side console.log(req.body.data) ??

Alessio Marchi Over a year ago

console.log(req.body.email, req.body.password)

RRR uzumaki Over a year ago

but then too i am getting the same error what i was previously getting

Alessio Marchi Over a year ago

what's the output of console.log(req.body)?

RRR uzumaki Over a year ago

undefined dude !

|

Collectives™ on Stack Overflow

Sending data from react server to node server

2 Answers 2

3 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related