Nuxt + echo(Golang) でフロントからAPIにデータをPOSTする方法を教えていただきたいです．

Question

現在Nuxt.jsとechoを使ってアプリケーションを作成しています．
Postmanでform-dataにデータを入れて実行すると問題なくデータが保存されるのですが，
フロントからRequestを投げるとBindの部分でエラーが発生し保存できません．
下記がエラ〜メッセージです．
2019/11/26 00:01:05 sake_review_api.go:27: action=Insert, err=code=400, message=Request body can't be empty
Postmanからであればデータを保存できるためおそらく原因はフロント側だと思うのですが，
もし何か原因がわかれば教えていただきたいです．
よろしくお願いいたします．

以下，コードになります．

認証部分はFirebaseを使用しており，APIにRequestを投げる際にheader情報にJWTを挿入して投げています．
フロントエンド側のコードは下記の通りです．

export default {
  components: { SakeReview, ReviewModal },
  data() {
    return {
      modal: false,
      title: '',
      review: '',
    }
  },

  methods: {
    async toggleReview() {
      await this.$store.dispatch('toggleReview', {
        uri: ROUTES.POST.TOGGLE_REVIEW.replace(':id', this.$route.params.id),
        title: this.title,
        review: this.review,
      })
    },

export default ({ $axios, app }) => {
  $axios.onRequest(config => {
    const token = app.$cookies.get('jwt_token');
      if (token) {
        config.headers.common['Authorization'] = `Bearer ${token}`
      }
  })
}

  async toggleReview({ commit }, payload) {
    const client = createRequestClient(this.$axios)
    const res = await client.post(payload.uri, {
      "title": payload.title,
      "review": payload.review
    })
  },

API側ではJWTからUIDを取得し，そのUIDを持つデータがあればそのデータを取得し，なければ新しくUserを作成する処理をしています．
投げられたrequestをBindし，データを保存する処理をしています．

func Insert() echo.HandlerFunc {
	return func(c echo.Context) error {
		dbs := c.Get("dbs").(*middlewares.DatabaseClient)
		token := c.Get("auth").(*auth.Token)

		user := models.User{}
		if dbs.DB.Table("users").Where(models.User{UID: token.UID}).First(&user).RecordNotFound() {
			user = models.User{UID: token.UID}
			dbs.DB.Create(&user)
		}

		review := new(models.review)
		if err := c.Bind(review); err != nil {
			log.Printf("action=Insert, err=%s", err.Error())
			return c.JSON(fasthttp.StatusInternalServerError, nil)
		}
		review.SakeIdentifyCode = c.Param("id")
		review.UserID = user.ID

		res := dbs.DB.Create(&review)
		if res.Error != nil {
			log.Printf("action=Insert, err=%s", res.Error)
			return c.JSON(fasthttp.StatusInternalServerError, nil)
		}

		return c.JSON(fasthttp.StatusOK, res.Value)
	}
}

---

###追記

リクエストヘッダー情報

2019/11/26 08:17:47 sake_review_api.go:44: map[Accept:[application/json, text/plain, */*] Accept-Encoding:[gzip, deflate, br] Accept-Language:[ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7] Authorization:[Bearer eyJhbGciOiJSUzI1NiIsImtpkT4kFkK_Y9LGu2A] Connection:[keep-alive] Content-Length:[0] Origin:[http://localhost:3000] Referer:[http://localhost:3000/sake/P002604?sake_name=%E3%80%86&maker_name=%E4%BC%8A%E6%9D%B1%E9%85%92%E9%80%A0] Sec-Fetch-Mode:[cors] Sec-Fetch-Site:[same-site] User-Agent:[Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36]]`
_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36]]

Comments

[nobonobo]

「情報を充足させる」か「動作可能なミニマムコード」が欲しいです。
そのどちらも無い場合、回答は難しいです。

欲しい情報はまずはリクエストヘッダーのダンプですね。
https://qiita.com/shin1x1/items/cfe7568cecbaffe0b23c
こちらなどを参考にどのようなリクエストヘッダーが送られているのかを調査してください。

[s.kozy]

コメントありがとうございます．
情報が足らず申し訳ありません．

ひとまずこちらがリクエストヘッダー情報を追加いたしました．
他の情報は後ほど追加いたします．
ご確認のほどよろしくお願いいたします．

[nobonobo]

その追記してくださったヘッダにあるとおり「Content-Length:[0]」なのでリクエストボディは空ですね。
あとはaxios側の挙動なんですが、createRequestClientが何者かがわかりません。
もしくはブラウザのデバッガで該当POSTのリクエストボディに意図したコンテンツがあるか確認してください。

[s.kozy]

解決しました！
上記に追記しましたが，request-client.js内のpostの第二引数に何も設定していなかったためAPI側にデータが送信できていませんでした．
そこで第二引数に初期値を設定したところ解決できました！
色々ご丁寧にありがとうございました！

Answer 1

修正前

request-client.js

export class RequestClient {
  constructor(axios) {
    this.axios = axios
  }

  async get(uri, params = {}) {
    const queryString = Object.keys(params).map(key => key + '=' + params[key]).join('&');
    const query = queryString.length > 0 ? `${uri}?${queryString}` : uri
    return await this.axios.$get(query)
  }

  async post(uri) {
    return await this.axios.$post(uri, data)
  }
}

export function createRequestClient(axios) {
  return new RequestClient(axios)
}

↓↓↓↓↓↓

修正後

async post(uri, data = {}) {
  return await this.axios.$post(uri, data)
}