質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.64%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,349

s.kozy

score 16

現在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]]
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • nobonobo

    2019/11/26 12:48

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

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

    キャンセル

  • s.kozy

    2019/11/26 16:22 編集

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

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

    キャンセル

  • nobonobo

    2019/11/26 17:07 編集

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

    キャンセル

  • s.kozy

    2019/11/27 08:38

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

    キャンセル

回答 1

check解決した方法

0

修正前 

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.64%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • トップ
  • Goに関する質問
  • Nuxt + echo(Golang) でフロントからAPIにデータをPOSTする方法を教えていただきたいです.