👏
どうしてもnuxtでaxiosが動かない時の留意点
ターゲット層
Nuxtで外部APIを叩きたいと考えているが、@nuxtjs/axiosがうまく動かない全人に向けて
結論
- nuxt.config.js内のaxiosとproxyの位置を変える
- axios内の{ proxy: true }の記述をなくす。
諸解説
この二つを踏まえた上でまだ動かないという人はpathRewriteやprefixなども見直したほうがいいです。
prefixというのは読んで字の如く前に付随しますよ〜という合図です。
なので$axiosがリクエストを送る際に記述したエンドポイント（URL）の前に勝手についてきます。
そして肝心なproxy部ですが、こちらにエンドポイントの設定をしてあげます。
/api/というエンドポイントを作ってあげたら、/api/というURLがヒットしたらこのtargetに飛ばすよという合図になります。
つまり、prefixでapiをつけてあげれば飛ばされたリクエストは必ずtargetに飛ばされることになります。
説明が複雑なので図解したいと思います。これでもわからなかったらすみませんm(__)m
※諸事情により（）が使用できません。なので適宜脳内変換していただけたらと思います〜
これを使用すれば適切にリクエストを送ることができると思います。
後書き
拙い文章で読みづらかったとは思いますが、手も足も出ないひとへの藁に慣れたら幸いです。
よきnuxtライフを〜〜〜
参考文献
Discussion