2017-12-09 8 views
1

何が原因かわかりませんが、nuxtjsを使用してusernamepasswordをjson形式のGoサーバーに送信しようとしています。これは私のVUEコードです:vuejs FormDataはjsonを送信しません

<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}を削除しようとしたが、結果は同じです。

サーバー囲碁コードは次のようになります。invalid character '-' in numeric literalを、そしてr.Bodyがあるためです::

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エラーが印刷されます

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

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

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

私は行くかなり確信していますコードは正しいですが、vue-resourceがFormDataをそのように送信する理由を理解できません。誰かがリクエストブラウザからregualr FORMDATAオブジェクトをJSON私の知る限りでは、符号化されることはありません

答えて

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

にJSONと他には何を送信する方法を示すことができれば、私は感謝します。だからjsonオブジェクトを定義すれば、すべてがうまくいくはずです。

+0

これはうまくいきました。私は誓ったことができます私は2つの異なる場所がFormDataがデフォルトでjsonを使用したことを見た:p – fisker

+0

あなたを助けて嬉しい。私はこの状況をとてもよく知っている;) –

関連する問題