ReactアプリでAPI呼び出しが失敗する原因と対策

Reactアプリケーションを開発していると、API呼び出しが失敗することがあります。この記事では、API呼び出しが失敗する一般的な原因とその対策について詳しく解説します。

1. ネットワークエラー

原因

ネットワークエラーは、サーバーがダウンしている、インターネット接続が不安定、またはAPIエンドポイントが間違っている場合に発生します。

対策

  • サーバーの状態を確認: サーバーが正常に稼働しているか確認します。
  • インターネット接続を確認: インターネット接続が安定しているか確認します。
  • APIエンドポイントを確認: APIのURLが正しいか確認します。
fetch('https://api.example.com/data')
  .then(response => response.json())
  .catch(error => console.error('Network error:', error));

2. CORSエラー

原因

CORS（Cross-Origin Resource Sharing）エラーは、ブラウザが異なるオリジンからのリクエストをブロックするために発生します。

対策

  • サーバー側でCORSを許可: サーバー側で適切なCORSヘッダーを設定します。
  • プロキシを使用: 開発環境でプロキシを設定してCORSエラーを回避します。
// サーバー側の例（Node.js/Express）
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

3. 認証エラー

原因

APIが認証を必要とする場合、適切な認証情報が提供されていないとエラーが発生します。

対策

  • トークンの確認: 有効な認証トークンを使用しているか確認します。
  • 認証ヘッダーの設定: リクエストに適切な認証ヘッダーを追加します。
fetch('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer YOUR_TOKEN_HERE'
  }
})
  .then(response => response.json())
  .catch(error => console.error('Authentication error:', error));

4. 不正なリクエスト

原因

リクエストの形式がAPIの期待する形式と一致しない場合、エラーが発生します。

対策

  • リクエストの形式を確認: APIドキュメントを参照して、正しいリクエスト形式を確認します。
  • データのバリデーション: 送信するデータが正しい形式であることを確認します。
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => response.json())
  .catch(error => console.error('Bad request:', error));

5. サーバーエラー

原因

サーバー側でエラーが発生している場合、API呼び出しが失敗します。

対策

  • サーバーログの確認: サーバーのログを確認してエラーの原因を特定します。
  • リトライロジックの実装: 一時的なエラーの場合、リトライロジックを実装します。
const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Server error');
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Server error:', error);
    // リトライロジックをここに追加
  }
};

まとめ

ReactアプリでAPI呼び出しが失敗する原因は多岐にわたりますが、適切な対策を講じることで問題を解決できます。ネットワークエラー、CORSエラー、認証エラー、不正なリクエスト、サーバーエラーのそれぞれについて、原因と対策を理解し、実装に役立ててください。