小村のポートフォリオサイト開発（１５） Axiosを使用したAPI呼び出し
こんばんは、小村だよ！
今日も下記のポートフォリオサイトを構築していくよ
- サイト：Little Village
今回は久しぶりにUI側を触るよ！
ここまで書いてきたAPIをついにUI側から呼び出しちゃおうと思います！
目次
- Axiosの利用
- CORSエラーを解消する
- トップページに表示
記録
Axiosの利用
ではでは、APIをUIから呼び出していきまっしょい！
-
- このサイトおしゃれですね。ポートフォリオサイト自体の参考にもよさげ
Nuxt.jsからAPIを呼ぶ際、Axiosというライブラリを使うことが多いです
Nuxt.jsでプロジェクト作成時に、私はAxiosにチェックを入れたのでばっちり導入済でした！
 |
じゃあさくっと動作確認用のコードをUI側に書いてさくっと実行しよう！
ほんとに動作確認のためだけのコードを書いたので実行！
 |
 |
 |
 |
エラーやんけ！！！！！！
びぇ～～～～ん！！！どらえも～～～ん！！！
CORSエラーを解消する
参考：【解決済】Docker上のNuxtでaxiosのCORSエラーにハマりまくった話
解消方法は下記の２つがあるみたいです
メッセージの通りヘッダに
Access-Control-Allow-Originを付けるプロキシを設定する
今回は参考サイトの通りproxyを設定してみましょう。
nuxt.config.jsを開き、下記の通り変更します
 |
 |
 |
ひゃっほぉぉぉぉおおおおお！！！！
無事取得できました！！！！！！！！！！
トップページに表示
せっかく取得できたのでサイトに表示してみます！
色々エラーと格闘して最終的にこんな感じになりました！
 |
 |
おわりに
今日はこれでおしまい！
やーーーっとスタートラインに立った感じですかね！
こうやって日を置いてみるとサイトが物足りないな……
色々やること浮かんできますが、一つずつかたずけていきましょう！
ではでは、ちゃお～～～！
