How to make POST Request through react.js?

Question

I am trying to make POST request call through react,but i am getting error.If any body knows help me out and please assist me where i have to changes.

Error is: {timestamp: 1510396949738, status: 415, error: "Unsupported Media exception: "org.springframework.web.HttpMediaTypeNotSupportedException", message: "Content type 'multipart/form-data;boundary=----Web…daryTY6125I1exH8Ry7f;charset=UTF-8' not supported", … …}

Here my React code:

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
const style = {
  margin: 15,
marginLeft: 600
};
export default class  Register extends React.Component {
  constructor(props) {
    super(props);
    this.onSubmit=this.handleSubmit.bind(this);
}
handleSubmit(e) {
    e.preventDefault();
    var self = this;


    var data = new FormData();
    const payload = {
    id: self.refs.id.getValue(),
    studentName: self.refs.sname.getValue(),
    age: self.refs.age.getValue(),
    emailId: self.refs.emailId.getValue()
};
data.append("myjsonkey", JSON.stringify(payload));

fetch('http://localhost:8083/students/', {
    method: 'POST',
    headers: {
    'Accept': 'application/json'
  },
    body: data
  })
    .then(function(response) {
        return response.json()
      }).then(function(body) {
        console.log(body);
      });
  }

render() {
    return (
      <form onSubmit={this.onSubmit}>
      <div style={style}>
      <TextField ref='id'
      hintText="Enter Student id"
      floatingLabelText="id"
      />
      <br/>
      <TextField ref='sname'
      hintText="Enter your Last Name"
      floatingLabelText="StudentName"
      />
      <br/>
      <TextField ref='age'
      hintText="Enter your Age"
      floatingLabelText="age"
      />
      <br/>

      <TextField ref='emailId'
      hintText="Enter your Email"
      floatingLabelText="emailId"
      />
      <br/>
      <br/>
      <input type="submit" />


      </div>
          </form>


    );
  }


}

Answer 1

the body is missing from fetch#post request.

body should be instance of FormData in your case.Or could be instance of other type like ArrayBuffer,Blob/File .. etc.

var data = new FormData();
const payload = {
    id: self.refs.id,
    studentName: self.refs.sname,
    age: self.refs.age,
    emailId: self.refs.emailId

};
data.append("myjsonkey", JSON.stringify(payload));

fetch('http://localhost:8083/students/', {
    method: 'POST',
    body: data
})

For more you Fetch.