axios post request to send form data

Question

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: '[email protected]' }  axios({     method: 'post',     url: '/addUser',     data: body }) .then(function (response) {     console.log(response); }) .catch(function (error) {     console.log(error); }); 

Browser Response:

If I set headers as:

headers:{   Content-Type:'multipart/form-data' } 

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.

Answer 1

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)

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

Related GitHub issue:

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