JavaScript

fetch failed: NetworkError

fetchでネットワークエラー

こんな症状

fetchでAPIを呼んだらNetworkErrorが出る。サーバー接続の問題で起きやすいよ。

まず試す

URL（スペル・ポート番号）が正しいか、サーバーが起動しているかを確認する。

// サーバー起動・URL確認の上で
fetch("http://localhost:3000/api").catch(console.error);

これで直らなければ、下の「自分のケース」を確認。

URLが間違っている、サーバーが起動していない、ネットワーク接続がない、またはCORSで拒否されているよ。fetchはネットワークレベルのエラー（サーバーに到達できない）の場合にNetworkErrorを投げるんだ。HTTPエラー（404等）とは異なり、そもそも通信できていない状態だよ。

✕ エラーが起きるコード

fetch("http://localhost:3000/api")
// サーバーが起動していない

✓ 直したコード

// 1. サーバーを起動する
// 2. URL を確認する
fetch("http://localhost:3000/api").catch(console.error);

fetch がエラーなくレスポンスを返せばOK。

try-catch（または .catch）でエラーを掴み、Networkタブで失敗の詳細を確認しよう。

この解決法は役立ちましたか？

SyntaxError: Unexpected token '<' — JSONの代わりにHTMLが返ってきた
Uncaught ReferenceError: xxx is not defined — 変数・関数名のタイポ
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') — 取得しようとしたHTML要素が見つかっていない
404 Not Found（スクリプトが読み込まれない） — script の src パスが間違っている
計算結果が NaN になる — 文字列を数値に変換していない

🚀 JavaScriptコースで基礎を学ぼう！

エラーの原因を根本から理解するには、基礎を体系的に学ぶのが近道です。完全無料・登録不要。