axios POST request is hitting the url on the controller but setting null values to my POJO class, when I go through developer tools in chrome, the payload contains data. What am I doing wrong?

Axios POST Request:

var body = {
    userName: 'Fred',
    userEmail: ''

    method: 'post',
    url: '/addUser',
    data: body
.then(function (response) {
.catch(function (error) {

Browser Response:

enter image description here

If I set headers as.


The request throws the error

Error in posting multipart/form-data. Content-Type header is missing boundary

If i make the same request in postman it's working fine and sets values to my pojo class.

Can anyone explain how to set boundary or how can I send form data using axios.

Best Answer

You can post axios data by using FormData() like.

var bodyFormData = new FormData();

And then add the fields to the form you want to send.

bodyFormData.append('userName', 'Fred');

If you are uploading images, you may want to use .append

bodyFormData.append('image', imageFile);

And then you can use axios post method (You can amend it accordingly)

  method: "post",
  url: "myurl",
  data: bodyFormData,
  headers: { "Content-Type": "multipart/form-data" },
  .then(function (response) {
    //handle success
  .catch(function (response) {
    //handle error

Related GitHub issue.

Can't get a .post with 'Content-Type': 'multipart/form-data' to work @ axios/axios