vuejs FormData 不发送 json

Question

我不太确定是什么原因造成的，但我正在使用 nuxtjs 并尝试以 json 形式将 username 和 password 发送到我的 Go 服务器。这是我的 Vue 代码：

<template>
<div class="container">
  <h1>Login</h1>
   <div>
    <label for="username" >Username</label>
    <input class="input-block" type="text" v-model="username">
  </div>
  <div>
    <label for="password" >Password</label>
    <input class="input-block" type="password" v-model="password">
  </div>
  <div>
    <button v-on:click="login">Login</button>
  </div>
</div>
</template>

<script>
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)

var loginURL = 'http://localhost:5000/login'

export default {
  data () {
    return {
      username: [],
      password: []
    }
  },
  methods: {
    login: function () {
      NProgress.start()
      var formData = new FormData()
      formData.append('username', this.username)
      formData.append('password', this.password)
      this.$http.post(loginURL, formData, {emulateJSON: true}).then(response => {
        console.log(response)
      }, response => {
        console.log(response)
      })
    }
  }
}
</script>

我也试过删除{emulateJSON: true}，但结果是一样的。

服务器 Go 代码如下所示：

func LoginPOST(w http.ResponseWriter, r *http.Request) {
  var loginForm struct {
    Username string `json:"username"`
    Password string `json:"password"`
  }
  body, err := ioutil.ReadAll(r.Body)
  if err != nil {
    // return 422
    return
  }
  fmt.Println("body string:", string(body))
  err = json.Unmarshal(body, &loginForm)
  if err != nil {
    fmt.Println(err)
    // return 422
    return
  }
  ...
}

json.Unmarshal 错误将打印：invalid character '-' in numeric literal，这是因为 r.Body 是：

body string: -----------------------------10632500131211292840295750524
Content-Disposition: form-data; name="username"

MYUSERNAME
-----------------------------10632500131211292840295750524
Content-Disposition: form-data; name="password"

MYPASSWORD
-----------------------------10632500131211292840295750524--

我很确定 Go 代码是正确的，但我不明白为什么 vue-resource 以这种方式发送 FormData。如果有人可以展示如何发送 json 而请求中没有其他内容，我将不胜感激

Answer 1

NProgress.start()
      var formData = {
        username: this.username,
        password: this.password
      }
      this.$http.post(loginURL, formData).then(response => {
        console.log(response)
      }, response => {
        console.log(response)
      })

据我所知，来自浏览器的常规 formdata 对象从未 json 编码。所以只需定义一个 json 对象，一切都应该没问题。

vuejs FormData 不发送 json

vuejs FormData doesn't send json

vue.js

vue-resource

vuejs2

nuxt.js