I have an object named entry with properties name, surname, age.

I try to use axios to send this object with post request to my REST server.

axios.post('http://host/myurl/myservice/',{data:this.ent})

However this fails with

400 Bad request

Because what is actually is being send is

 data: {data: {"name":"Jakob", "surname":"Laurence", "age":"25"} }

There is an extra data field which is not recognized on the server.

if I call

axios.post('http://host/myurl/myservice/',{
"name":this.entry.name, "surname":this.entry.surname, "age":this.entry.age 
})

Then everything works fine.

How can I post the entire object without axios generating extra data field, so that my server does not bee confused?

Thanks.

P.S. All the above is going on in my Vue project (not sure if it's relevant).

I have an object named entry with properties name, surname, age.

I try to use axios to send this object with post request to my REST server.

axios.post('http://host/myurl/myservice/',{data:this.ent})

However this fails with

400 Bad request

Because what is actually is being send is

 data: {data: {"name":"Jakob", "surname":"Laurence", "age":"25"} }

There is an extra data field which is not recognized on the server.

if I call

axios.post('http://host/myurl/myservice/',{
"name":this.entry.name, "surname":this.entry.surname, "age":this.entry.age 
})

Then everything works fine.

How can I post the entire object without axios generating extra data field, so that my server does not bee confused?

Thanks.

P.S. All the above is going on in my Vue project (not sure if it's relevant).

• javascript
• rest
• vuejs2
• axios

2 Answers 2

Direct pass the whole object:

axios.post('http://host/myurl/myservice/', this.ent);

define the data as a constant before adding it to the axios url.

const postData = {
  name: this.entry.name,
  surname: this.entry.surname,
  age: this.entry.age
}
axios.post('http://host/myurl/myservice/', postData)