Vue將數據傳遞給POST方法

Question

我有一個問題，將數據傳遞給Vuejs post方法。 我正在使用vue-resource，在文檔中是：

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

我想把標題，它工作正常（服務器讀取標題正確）：

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

但如果我嘗試添加任何數據出錯，例如我嘗試：

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

或者定義一些數據並放在那里：

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

並且對於兩個解決方案，body部分始終為空 - 使用以下命令檢查請求中的正文數據：

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

可能問題出在vue.js代碼中，因為它可以正常工作，我從Postman發送任何請求。 我該怎么辦？

Answer 1

您是否嘗試過發送帖子請求而不包含帖子的第三個參數

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

這對我有用......

另一件事，你確定你在后端正確獲取請求數據......它看起來像python，我不完全確定它是如何工作的。

Answer 2

如果要發送多個JSON值，這是一個示例。

 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.com/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>