Vue传递数据到POST方法

Question

我遇到了一个问题，就是将数据传递给Vuejs的post方法。我正在使用vue-resource，并且文档中提到：

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

我想添加头信息（header），并且对以下情况工作正常（服务器正确读取头信息）：

 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 = req.getReader().lines().collect(Collectors.joining(System.lineSeparator()));

可能问题在vue.js代码中，因为如果我从Postman发送任何请求，它都可以正常工作。我该怎么办？

- littlewombat

---

请使用Axios，Vue Resource已停止维护，并且与Vue 2不完全兼容。 - Belmin Bedak

很容易责怪工具 :) 我认为甚至有一句谚语是这样说的。告诉我你遇到了什么错误。“它不起作用”几乎不足以提供足够的数据。尽管@BelminBedak在VueResource方面是正确的，但我使用它没有任何问题，而且我也不打算停止使用。 - peaceman

@peaceman 我在基于VueJS 2的项目中使用了Vue Resource，并且它对我来说运行良好-我只处理了GET请求。社区建议使用Axios。我并不责怪这个工具，我只是说出了推荐的方式。 - Belmin Bedak

@BelminBedak，不，这个评论并不是针对你的，也不是批评。我之前也读过一些在线资料，axios似乎是一个很好的选择，此外，vue和vue-resource组已经分道扬镳了。这使得vue可以与任何其他服务器通信解决方案一起使用。尽管如此，VueResource仍然是一个合理的选择，它可以完成大多数你需要的事情（好吧，只有get和post...我没有使用其他动词 :)）。 - peaceman

@peaceman，我的请求正文始终为空，并且通常我的方法不像在Postman中那样工作。你能否提供一个带有一些头部值和一些数据的示例？（我尝试了很多事情，但仍然没有结果） - littlewombat

"拙匠怨工具" - Gene Yllanes

Answer 1

你有没有尝试在发送post请求时不包括第三个参数？

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

这对我有用...

另外，你确定后端正确获取了请求数据吗...看起来是用Python实现的，但我不太确定它的工作原理。

- peaceman

---

这是Spring Boot相关的内容，你的代码主体是""。我不知道出了什么问题，因为如果我使用Postman一切都正常... - littlewombat

非常抱歉，我无法帮助您处理Java和Spring相关的问题，但我可以向您保证VueResource部分是有效的，因为我已经多次进行过测试。您发布了有效的JSON数据。您可以尝试使用axios或jQuery Ajax进行测试，也可以检查后端代码是否存在问题。那这是打印请求数据的唯一方式吗？ - peaceman

我尝试了jQuery，但是出现了相同的问题（body为空）。你有任何想法为什么来自浏览器的请求与来自Postman的请求不同吗？ - littlewombat

可能有很多原因...我不够了解，无法给你一个列表 :) 我建议尝试使用$("#form-selector").serialize()并发送它，或者使用var formData = new FormData()，然后使用formData.append("key", "value")并将formData作为数据对象发送。如果有效，请告诉我 :) 很抱歉我不能提供更多帮助。 - peaceman

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>

- Azam