Failed to fetch - ネットワーク・サーバー問題の原因と解決策

概要

サーバーが停止している、またはネットワーク接続に問題がある場合に発生します。curlでも失敗する場合は、ネットワークまたはサーバー側の問題です。

この原因かどうかの確認方法

1
2
3
4
5
6
7
8
9
# サーバーへの到達性確認
ping api.example.com

# ポート確認
nc -zv api.example.com 443

# DNS確認
nslookup api.example.com
dig api.example.com

curlでも失敗する場合、ネットワーク/サーバー問題の可能性が高いです:

1
curl -v https://api.example.com/endpoint

解決策

1. サーバーの状態を確認

サーバーが起動しているか確認
ファイアウォール設定を確認
ポートが正しく開放されているか確認

2. タイムアウトとリトライを実装

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
async function fetchWithRetry(url, options = {}, retries = 3) {
  const controller = new AbortController();
  const timeout = setTimeout(() => controller.abort(), 10000);

  for (let i = 0; i < retries; i++) {
    try {
      const response = await fetch(url, {
        ...options,
        signal: controller.signal
      });
      clearTimeout(timeout);
      return response;
    } catch (error) {
      if (i === retries - 1) throw error;
      // 指数バックオフ
      await new Promise(r => setTimeout(r, Math.pow(2, i) * 1000));
    }
  }
}

3. オフライン対応を実装

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
// オンライン状態を確認
if (!navigator.onLine) {
  console.log('オフラインです。ネットワーク接続を確認してください。');
  return;
}

// オンライン/オフラインイベントをリッスン
window.addEventListener('online', () => {
  console.log('オンラインに復帰しました');
  // 保留中のリクエストを再送
});

window.addEventListener('offline', () => {
  console.log('オフラインになりました');
});

よくある間違い

ローカル開発でサーバーを起動し忘れている
VPNや企業プロキシの影響を考慮していない
DNS設定が正しくない

まだ解決しない場合

→ 診断ハブに戻る

Failed to fetch - ネットワーク・サーバー問題

概要

この原因かどうかの確認方法

解決策

1. サーバーの状態を確認

2. タイムアウトとリトライを実装

3. オフライン対応を実装

よくある間違い

まだ解決しない場合

関連エラー

関連エラー

JavaScript の他のエラー