Vue.js：DjangoのSPA化で記録しておいた方が良いと感じたErrorと改善方法

Vue.js：DjangoのSPA化で記録しておいた方が良いと感じたErrorと改善方法

昨日の記事の続きのような内容になります。
Dockerで【 Django × Vue 】 のSPA環境を構築する際に出てきたAPI絡みのエラーをまとめておきます。

Dockerを作り変えてリビルドしてを繰り返した際に多出したエラーが下の2つです。

其々に対して原因となっていた個所を記載していきます。

※前提条件として【Vueが起動していてAPIを受け取れない】状態を改善するポイントとなっています。
『コンテナが動かない』『Vueが起動しない』にはマッチしない記事です。

cannot read property ‘get’ of undefined axios

翻訳機に掛けると上の意味だと言う事がわかります。
【 axios 】はVueでAPIをリクエストするツールです。先輩方の言葉を借りると下の内容になります。

undefined axiosの原因はmains.jsの設定ミス

出力vueファイル内の【this.$axios.get(API.url)】が見えていないから発生しているエラーです。

「aciosが未定義」と言っているわけですから、mains.jsの設定に下のコードが含まれていない可能性があります。
Use（import）忘れですね。

APIのURLが存在しないときは404エラー

『「get」が読めない』と言われるとフロント側ではなくバックエンド側に問題があると考えてしまいがちです。
実際、私もBackendのURLリストを確認したりしました。
でも、リクエストURLが異なっている場合のエラーは404エラーです。

翻訳機の和訳に流されないようにしましょう。

Access to XMLHttpRequest at … has been blocked by CORS policy: …

これはフロントとバックのURL(ポート含め)が異なるために発生しているエラーです。
SPAの構築ではよく出してしまうエラーの様で参考資料も沢山ありました。
この記事がわかりやすかったです。

具体的な回避方法はvue.config.jsをVueプロジェクトの直下（package.jsと同じ場所）に作成しここにプロキシを設定する事。私は下のコードだけで改善しました。

vue.config.jsを設置する際の注意点

vueをインストールした素の状態の時、プロジェクトのRoot（package.jsと同じ場所）にvue.config.jsは存在しません。そのため、新たに作成する必要があります。

で、新たに作成してもそれだけでは適用されません。Vueサービスの再起動が必要です。

Vueプロジェクト/src/components内のVueファイルなんて書いたそばからWEB画面に変化があるのでコンフィグもそうなると思い込んではいけません。私はこれでかなりの時間を使ってしまいました。変更してもナニモ変わらないので他に問題があるのかと思いだしたりしてしまいがちですが、必ずVueの再起動が必要です。注意しましょう。

CORS ポリシー違反ってなに？

クロスドメインエラーともいわれるメジャーなエラー原因です。
APIではドメインやポートをまたいでいる事が殆どだと思います。
自分から自分に対してAPいでデータ取得するケースがゼロとは言いませんが、多くの場合は下のようになっていると思います。

ポート番号は様々だと思いますが、FrontとBackでは同一ドメインであっても別ポートで構築していると思います。

この時、ちゃんとしたAPIではCORSの規約に違反しないように Access-Control-Allow-Origin をヘッダー内に格納してアクセスを許可するアドレスを記載します。

例えば上の様な記載があれば https://example.com からの接続は許可するよとの意味になります。
アクセス許可していないURLからAPIリクエストが届いた場合「展開できません」と処理されてしまいます。
一見さんお断りのお店に入ってきた新規客のような感じですね。

今回【vue.config.js】に記載したコードはこのアドレスを置き換えることで受け取れるようにしています。

まとめ

JQueryで書くことが多かったのでVueにはまだ慣れていませんが、触ってみると面白いですね。

自由に書いてきた身としてはルールに手こずる所はありますけど「慣れると早いんだろうなぁ」と実感してます。