Vueでaxiosを使って楽天APIを叩き、検索結果を表示したい

Question

前提・実現したいこと

Vueのaxiosを使って楽天商品検索APIを叩いて、検索結果を表示したい
formから検索しようとすると、400BadRequestが返ってくる。

400番なので構文エラーなのかと思いますが、どこの部分が間違えているか特定できません。
アドバイスをいただけると幸いです。

発生している問題・エラーメッセージ

GET https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?applicationId=XXXXXXXXXXXXXXXXXXX&keyword=%E7%AD%8B%E3%83%88%E3%83%AC 400 (Bad Request)

該当のソースコード

<script>
import axios from "axios"

export default {
  name: "RakutenApiCall",
  data() {
    return {
      items:[],
    }
  },

  methods:{
    //templateでsearchItem()をクリックしたら発火
    searchItem() {
      const { data } = this.$axios.get('https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706', {
        params: {
          applicationId: XXXXXXXXXXXXXXXXX,
          keyword: '筋トレ',
        }
      })
      .then(response => {
        this.items = response.data;
      })
      .catch(err => {
        console.log(err)
      })
    },
  },
};
</script>

試したこと

楽天APIのHPに記載されていたリクエストURLは下記の通りなので、URLは正しいかと思います。

https://app.rakuten.co.jp/services/api/IchibaGenre/Search/20140222?[parameter]=[value]…

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

ブラウザのJSからそのAPIが使えるかの確認が必要→楽天APIは使えるようなので問題なし。

400なら何がエラーになってるかエラーメッセージから調べる。
https://webservice.rakuten.co.jp/api/ichibaitemsearch/
パラメータ不足か間違いなので他人からは分からない。

Comments

[nomu_lui]

ありがとうございました！
しっかりエラーメッセージに書いてありました。