Django + NextJS + Stripeサブスク有料会員サイト構築チュートリアル1(アカウント認証編)で新規登録時にfetchでDRFのAPIが取得できない。
解決済
回答 5
2023/04/24 23:26
質問内容

いつも楽しく学習させていただいております。
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
   }
 }

ソースコード

https://github.com/Masaya00/InstaLike/blob/master/frontend/insta/pages/api/account/register.tsx#L12-L43

自分で試したこと

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に関しては素人です。

お忙しいところ大変恐縮ですが、ご返信いただけましたら幸いです。
これからの動画投稿、執筆活動のご健闘をお祈りしています。

回答 5
ベストアンサーを選択すると、解決済みとなります。
nodata
まだ回答がありません
回答
nodata
回答するにはログインが必要です