Failed to fetch の原因と解決策

概要

Failed to fetchは、Fetch APIでリクエストが失敗した場合に発生する一般的なエラーです。このエラーは具体的な原因を表示しないため、原因の特定が困難です。CORS、ネットワーク障害、SSL証明書、サーバー停止など、さまざまな原因で同じエラーメッセージが表示されます。

エラーメッセージ

TypeError: Failed to fetch

TypeError: NetworkError when attempting to fetch resource.  (Firefox)

TypeError: Load failed  (Safari)

原因の切り分け方法

Failed to fetchは多くの原因で発生するため、以下の順序で切り分けてください。

ステップ1: DevToolsで詳細を確認

1. ブラウザのDevTools（F12）を開く
2. Networkタブを確認
3. 失敗したリクエストをクリック
4. 以下を確認:
   - Status: ステータスコード（0 = リクエスト未到達）
   - Headers: レスポンスヘッダー
   - Console: 追加のエラーメッセージ

確認ポイント:

Networkタブの状態	原因の可能性
リクエスト自体が表示されない	コード側の問題（URL不正、fetch未実行）
Status: 0（赤色）	CORS / ネットワーク / SSL
Status: 4xx/5xx	サーバー側エラー
Consoleに`CORS`の文字	CORSポリシー違反
Consoleに`Mixed Content`	HTTPS→HTTP問題
Consoleに`ERR_CERT`	SSL証明書問題

ステップ2: curlで直接リクエスト

ブラウザを経由せず、ターミナルからリクエストして切り分けます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
# 基本リクエスト
curl -v https://api.example.com/endpoint

# レスポンスヘッダーのみ確認
curl -I https://api.example.com/endpoint

# CORSヘッダー確認（OPTIONSリクエスト）
curl -X OPTIONS -H "Origin: https://your-site.com" \
  -H "Access-Control-Request-Method: GET" \
  -v https://api.example.com/endpoint

判断基準:

curlの結果	判断
curlで成功 → ブラウザで失敗	CORS / Mixed Content が原因
curlでも失敗	ネットワーク / サーバー / SSL が原因
curlでタイムアウト	サーバー停止 / ファイアウォール
curlでSSLエラー	証明書の問題

原因別の解決策

原因	記事
CORSポリシー違反	CORS
Mixed Content	Mixed Content
ネットワーク・サーバー問題	ネットワーク
SSL/TLS証明書	SSL
リクエストキャンセル	Abort

環境別の解決策

環境	記事
Node.js	Node.js
React/Next.js	（準備中）
ブラウザ拡張機能	（準備中）

エラーハンドリングのベストプラクティス

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
async function apiFetch(url, options = {}) {
  try {
    const response = await fetch(url, options);

    if (!response.ok) {
      // HTTPエラー（4xx, 5xx）
      const body = await response.text();
      throw new Error(`HTTP ${response.status}: ${body}`);
    }

    return await response.json();
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('リクエストがキャンセルされました');
      return null;
    }

    if (error.message === 'Failed to fetch') {
      // ネットワークレベルのエラー
      console.error('ネットワークエラー: サーバー到達不可、CORS、またはSSLの問題');
      console.error('DevTools の Network タブを確認してください');
    }

    throw error;
  }
}

Failed to fetch

概要