問題
Nuxt.jsからDjango REST Framework(以下DRF)のAPIを叩いて特定の情報を表示させようとした時にDjango側のログにNot Foundが出ました。
まずはDjango側の不具合かと思い、一旦DRFのコンソールで確認しましたが、データは存在し、かつ閲覧できる状態です。
単純な問題ですが、うっかりミスをしていたので念のため記事として残しておきます。
解決法
以上の前提条件からNot Foundが起こっている場合、十中八九エントリーポイントの設定を間違えています。
そもそもの前提の話ですが、Djangoのルーティングではurls.pyに記述されているもの以外のurlが打ち込まれた場合は404のエラーハンドリングをしていない場合は無条件でNot Foundになります。なので、Nuxt.js側で呼び出すエントリーポイントの記述を間違っている可能性が高いです。
例えば、
async asyncData ({ $axios, params }) {
try {
const user = await $axios.$get('user')
return { user }
} catch (e) {
return { user: [] }
}
といったような形でデータを取得しようとしていた場合、Django側のプロジェクトのurls.pyで
urlspatterns = [
path('api/',include('sample.urls')),
]
と記述し、
urlspatterns = [
path('user/',UserListView.as_view()),
]
といったような形式の書き方しなければなりません。
なぜならば、DRFの書き方と同じようにapi/user
といったアドレスからGETしないとuser
のデータを取得することはできないからです。
なのでDjango側でのルーティングに合わせた書き方をNuxt.js側でもしてあげなければならないんですね。
簡単なことですが、フロントエンドとバックエンドを分離させて外部からAPIサーバーを叩く場合は意外と見落としがちかなと思います。
少なくとも今回の自分はちょっとだけハマりました。
この件で前よりもルーティングの理解が深まったので良かったです。
この記事が誰かの助けになると幸いです。