vuejs FormData doesn't send json

Question

I'm not quite sure what's causing it, but I'm using nuxtjs and attempting to send username and password to my Go server in json form. This is my vue code:

<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>

I have also tried to remove {emulateJSON: true} but the result is the same.

The server Go code looks like this:

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
  }
  ...
}

The json.Unmarshal error will print: invalid character '-' in numeric literal, and that's because the r.Body is:

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

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

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

I'm quite sure the Go code is correct, but I can't figure out why vue-resource sends the FormData in that way. I'd appreciate if someone could show how to send json and nothing else in the request

Thomas · Accepted Answer · 2017-12-09 16:50:09Z

2

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

A regualr formdata object from the browser is never json encoded as far as i know. So just define a json object and everything should be fine.

answered Dec 9, 2017 at 16:50

Thomas

2,5461 gold badge19 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

fisker Over a year ago

This worked, thanks a lot! I could've sworn I saw two different places mention FormData used json by default :p

Thomas Over a year ago

Glad to help you. I know this situation very well myself ;)

Collectives™ on Stack Overflow

vuejs FormData doesn't send json

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related