I have a problem with passing data to Vuejs post method. I'm using vue-resource and in documentation is:

this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

I want to put header and it works fine(server reads header correct) for:

 this.$http.post(
      'http://localhost:8081/login', 
      {
        headers: {
          'Accept': 'application/json'
        }
      });

but if I try add any data something goes wrong, for example I tried:

this.$http.post(
      'http://localhost:8081/login',
       {username: 'admin'},
      {
        headers: {
          'Accept': 'application/json'
        }
      });

or define some data and put there like:

this.$http.post(
      'http://localhost:8081/login', 
       this.data,
      {
        headers: {
          'Accept': 'application/json'
        }
      });

and for both solutions body section is always empty - check body data from request by using:

 body = req.getReader().lines().collect(Collectors.joining(System.lineSeparator()));

Probably problem is in vue.js code ebcause it works fine it I send any request from Postman. What should I do?

I have a problem with passing data to Vuejs post method. I'm using vue-resource and in documentation is:

this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

I want to put header and it works fine(server reads header correct) for:

 this.$http.post(
      'http://localhost:8081/login', 
      {
        headers: {
          'Accept': 'application/json'
        }
      });

but if I try add any data something goes wrong, for example I tried:

this.$http.post(
      'http://localhost:8081/login',
       {username: 'admin'},
      {
        headers: {
          'Accept': 'application/json'
        }
      });

or define some data and put there like:

this.$http.post(
      'http://localhost:8081/login', 
       this.data,
      {
        headers: {
          'Accept': 'application/json'
        }
      });

and for both solutions body section is always empty - check body data from request by using:

 body = req.getReader().lines().collect(Collectors.joining(System.lineSeparator()));

Probably problem is in vue.js code ebcause it works fine it I send any request from Postman. What should I do?

• javascript
• vue.js

• 4 Use Axios, Vue Resource is not maintained anymore and not fully patible with Vue 2 – Belmin Bedak Commented Feb 19, 2017 at 12:20
• 1 It is very easy to blame a tool :) I think there is even a saying about that. Tell me what error are you getting. "It's not working is hardly enough data". Even though @BelminBedak is right about VueResource I had no problem using it and I don't plan to stop. – peaceman Commented Feb 19, 2017 at 15:05
• @peaceman I used Vue Resource on VueJS 2 Based project and it worked fine for me too - I only dealed with GET Requests.It's suggested by munity to use Axios.I don't blame the tool, I just say what is remended. – Belmin Bedak Commented Feb 19, 2017 at 15:13
• @BelminBedak , no the ment wasn't directed towards you nor was it a criticism. I've also read stuff online before using it and axios does seem like a great choice, in addition to that vue and vue-resource groups have parted ways. That enabled vue to be used with any other solution for server munication. All that being said VueResource is still a reasonable choice and it does most anything you need ( well get and post... I didn't work with other verbs :) ) – peaceman Commented Feb 19, 2017 at 15:19
• @peaceman just my request body is always empty and in general my methods doesn't work like in Postman. Could you put there example with some values in header and some data in body? (I tried a lot of things but still nothing) – littlewombat Commented Feb 19, 2017 at 16:36

2 Answers 2

Have you tried sending a post request without including the third argument with post

this.$http.post('url', {something: "string"})
  .then ((res)=> console.log (res.body))
  .catch ((error)=> console.log(error))

This works for me...

Another thing, are you sure you're getting the request data properly in the back end... it seems like python and I'm not totally sure how it works.

Here is an example if you want to send multiple JSON values.

const vm = new Vue({
  el: '#app',
  data: {
    email: '',
    password: ''
  },
  methods: {
    getPosts() {
      return axios.post('http://127.0.0.1:5000/login',
        { email: this.email,
          password: this.password
        },
        { headers: {
        'Content-type': 'application/json',
        }
      }).then((response) => {
        console.log('email: ' + this.email);
        console.log('password: ' + this.password);
      }).catch( error => { 
        console.log('error: ' + error); 
      });
    }
  }
});

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input type="email" name="email" v-model="email">
  <input type="password" name="password" v-model="password">
  <button v-on:click="getPosts()">Login</button>
</div>