Vue-cliでform-dataのPOSTに失敗する（サーバーサイドに正確な情報が送られていない）

Question

post-formでnameとpasswordを送信してログイン認証するAPIを叩き、認証に成功すればmypageにリダイレクトする処理を実装したいです。
正しいnameとpasswordの組み合わせでも、”500 Internal Server Error”が返ってきてアラートが表示されてしまいます。

<template>
  <div class="login userAdmin">
    <form class="form-signin" @submit.prevent="submitForm" action="">
      <img class="mb-4" src="" alt="" width="72" height="72" />
      <h1 class="h3 mb-3 font-weight-normal">ログインする</h1>
      
      <label for="name" class="sr-only">ユーザー名</label>
      <input
        v-model="name"
        type="name"
        id="name"
        class="form-control"
        placeholder="ユーザー名"
        required
        autofocus
      />
      
      <label for="password" class="sr-only">パスワード</label>
      <input
        v-model="password"
        type="password"
        id="password"
        class="form-control"
        placeholder="パスワード"
        required
      />
      
      <button class="btn btn-lg btn-primary btn-block" type="submit">
        ログイン</button><br />
      <p>あるいは<router-link to="register">登録する</router-link></p>
    </form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      name: "",
      password: "",
    };
  },
  methods: {
    submitForm() {
      axios
        .post("/login", {
          name: "meow",
          password: "nemnem",
        })
        .then((res) => {
          next({ path: "/mypage" });
        })
        .catch((error) => {
          alert("ユーザー名もしくはパスワードが違います");
        });
    },
  },
};
</script>

Postmanでname・passwordのvalueを上記コードと同じ値にしてform-dataとして送信すると成功し、"200 OK"が返ってきています。
config/index.jsでバックエンド側のポートに接続しています。
URIが間違っていないことはgetができているので確認済みです。
この方法ではform-dataとして送信できないのでしょうか。

バージョン・バックエンド情報

Vue v2.9.6
Bootstrap-Vueを使用しています。
バックエンドはGolang（FWとしてginを使用）で書いています。

Comments

[neko_daisuki]

送信したあとに、ブラウザの開発者ツールのコンソールにはエラーが出ていませんか？

[marronnier]

エラーどころか何も表示されていませんでした。

Answer 1

URLSearchParamsでパラメータを取得しなければならないようです。
よって、以下のようなコードで書けました。
更に、上記コードではページ遷移ができないことも分かりました。
this.$router.pushで遷移先を指定できます。

methods: {
  submitForm() {
      const params = new URLSearchParams();
      params.append("name", meow);
      params.append("password", nemnem);
      axios
        .post("/login", params)
        .then((res) => {
          this.$router.push({ name: "Mypage" });
        })
        .catch((error) => {
          alert("ユーザー名もしくはパスワードが違います");
        });
    },
 }