0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Next.js】middleware.tsのfetch failedについて

Last updated at Posted at 2024-06-15

はじめに

Next.jsにはmiddlewareを簡単に設置することができる。決められた場所に「middleware.ts」または「middleware.js」を作成して実行したい処理を記述するだけで簡単にmiddlewareを走らせることができる。が、そのmiddlewareファイルでAPI通信を走らせたい場合にfetchを利用したが、実行できず「fetch failed」エラーが出た。これを解決するのに恥ずかしながら結構時間を費やしてしまったため、備忘録として書き留めておく。

※環境はDockerを使用しているのでDockerでの解決方法

環境

  • Docker
  • node.js v20
  • Next.js v14

前提

Next.jsのアプリケーション内では「axios」を使用している。middlewareファイルではaxiosが動作しないため、fetchを使用してAPIを走らせるところまでは辿り着いた。だがそのfetchも動かなかった。。
原因は

  • そのAPIのURLは間違っている
  • localhostに拒否されている
  • 127.0.0.1に拒否されている
  • ネットワークエラー系

みたいな意味合いのfetch failedだった。

解決方法

解決方法は至ってシンプルだった。
fetchのURLをコンテナ名とポート番号を指定してあげるだけだった。

- fetch("http://localhost/api/v1/check")
+ fetch("http://nginx:80/api/v1/check")

この場合は

  • コンテナ名 : nginx
  • ポート番号 : 80

となる。

終わりに

いや〜だいぶハマった・・・

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?