いつも楽しく学習させていただいております。
zennで購入したインスタ風画像投稿サイト構築チュートリアルを実施するためにyoutubeでDjango + NextJS + Stripeサブスク有料会員サイト構築チュートリアル1(アカウント認証編)を参考に実装を進めている際にエラーにハマりましたのでご質問させてください。
fetchでDRFで作成した新規登録API(api/auth/register)を叩けるようにしたい。
// NEXT_PUBLIC_API_URL=http://127.0.0.1:8000 は.envに定義しております。 const apiRes = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/auth/register/`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', }, body: body
以上のコードを実施したときにエラー内容が出力されます。
TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11457:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async register_api (webpack-internal:///(api)/./pages/api/account/register.tsx:19:28) { cause: Error: connect ECONNREFUSED 127.0.0.1:8000 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1532:16) { errno: -111, code: 'ECONNREFUSED', syscall: 'connect', address: '127.0.0.1', port: 8000 } }
① http://127.0.0.1:8000/api/auth/register/ をPostmanで叩いた際は問題なく新規登録を行えることを確認しています。
② 以下のように127.0.0.1が起動していることは確認しております。
% netstat -n | grep '127.0.0.1' tcp4 0 0 127.0.0.1.8000 127.0.0.1.62993 ESTABLISHED tcp4 0 0 127.0.0.1.62993 127.0.0.1.8000 ESTABLISHED ・ ・ ・
③ jsonplaceholderの内容をfetchで取得することはできました。
④ http://127.0.0.1:8000/api/auth/user をfetchで取得しようとした際にも今回と同様のエラーが発生しました。
typescriptを利用し、環境構築はdockerで行なっておりますので、動画内のソースコードと全てが同じというわけではありません。ご容赦ください。
Django側とNextJS側の連携が上手くいっていないだけのようなのですが、原因が突き止められておりません。
もしこのエラー内容に心当たりがありましたら、ご教授いただきたいです。
※当方、Djangoの知見はそれなりにあるのですが、Next.jsに関しては素人です。
お忙しいところ大変恐縮ですが、ご返信いただけましたら幸いです。
これからの動画投稿、執筆活動のご健闘をお祈りしています。