React-native IOS: Network request failedの解決方法【2025年最新版】

エラーの概要・症状
このエラーが発生する原因
解決方法1（最も効果的）
解決方法2（代替手段）
1. 正しいIPアドレスの使用
解決方法3（上級者向け）
1. コマンドラインを使用したデバッグ
エラーの予防方法
関連するエラーと対処法
まとめ

エラーの概要・症状

React Nativeを使用してiOSアプリを開発している際に、ネットワークリクエストが失敗することがあります。このエラーメッセージは「Network request failed」と表示され、特にHTTPリクエストを送信しようとするときに発生します。このエラーは、アプリが外部サーバーやAPIにアクセスできないことを示しており、開発中のアプリが正しく動作しない原因となります。

多くの場合、このエラーは以下のような状況で発生します。

エミュレーターを使用している場合、ローカルホストにアクセスできない。
iOSのApp Transport Security（ATS）によってHTTPリクエストがブロックされる。
サーバーのIPアドレス設定が不適切である。

これらの問題により、ユーザーはアプリの機能を十分に試すことができず、開発サイクルが遅延することがあります。エラーの解決は、アプリの安定性とユーザーエクスペリエンスを向上させるために重要です。

このエラーが発生する原因

「Network request failed」というエラーは、さまざまな要因によって引き起こされます。以下に、主な原因を詳しく説明します。

1. App Transport Security (ATS)の制限

iOSのATSは、アプリがHTTPリクエストを送信することをデフォルトで禁止しています。これにより、HTTPではなくHTTPSを使用することが求められます。HTTPリクエストを許可するためには、info.plistファイルに適切な設定を追加する必要があります。

2. ローカルサーバーへのアクセス

エミュレーターやデバイスからローカルサーバーにアクセスする際、localhostや127.0.0.1を使用すると、実際にはデバイスやエミュレーター自身を指すため、正しく接続できません。正しいIPアドレスを指定する必要があります。

3. サーバーのIPアドレスの誤設定

サーバーが別のマシンでホストされている場合、開発マシンのIPアドレスを正しく指定しないと、リクエストは失敗します。特に、エミュレーターやデバイスが異なるネットワークに接続されている場合に注意が必要です。

4. 不適切なリクエストヘッダー

APIへのリクエストに必要なヘッダーが不足している場合、サーバーがリクエストを拒否することがあります。特に、Content-Typeヘッダーや認証情報が重要です。

5. ファイアウォールやネットワーク設定

開発環境におけるファイアウォールの設定が原因で、リクエストがブロックされる場合があります。特に、ローカル開発サーバーへのアクセスが制限されていると、エラーが発生します。

解決方法1（最も効果的）

手順1-1: info.plistに設定を追加

Xcodeでプロジェクトを開きます。
iosフォルダー内のinfo.plistファイルを見つけて開きます。
以下の設定を追加します。

   <key>NSAppTransportSecurity</key>
   <dict>
       <key>NSAllowsArbitraryLoads</key>
       <true/>
   </dict>

保存してXcodeを再起動します。

この設定は、HTTPリクエストを許可するためのもので、ATSの制限を回避します。ただし、セキュリティ上の理由から、必要な場合にのみ使用することを推奨します。

手順1-2: サーバーのIPアドレス設定

エミュレーターやデバイスからアクセスするサーバーのIPアドレスを確認します。

Windowsの場合、ipconfigコマンドを使用して確認できます。
Macの場合、ifconfigコマンドを使用します。

React Nativeのコード内で、fetch関数のURLを以下のように設定します。

   fetch('http://<サーバーのIPアドレス>:<ポート>/api/foo')

例: fetch('http://192.168.0.2:8000/api/foo')

手順1-3: 注意点とトラブルシューティング

iOSデバイスからのアクセス時には、Wi-Fi接続が必要です。エミュレーターではなく実機を使用している場合、同じネットワークに接続されていることを確認してください。
リクエストが失敗した場合、Xcodeのコンソールでエラーメッセージを確認して、問題の特定を行います。

解決方法2（代替手段）

正しいIPアドレスの使用

Androidエミュレーターを使用している場合、localhostの代わりに10.0.2.2を使用します。これは、エミュレーターがホストマシンにアクセスするための特別なアドレスです。

Genymotionを使用している場合は、10.0.3.2を使用してください。

React Nativeのコード内で、fetch関数のURLを以下のように設定します。

   fetch('http://10.0.2.2:8000/api/foo')

この設定により、エミュレーターが正しくローカルサーバーに接続できるようになります。

解決方法3（上級者向け）

コマンドラインを使用したデバッグ

ターミナルを開き、以下のコマンドを実行して、エミュレーターまたはデバイスからのログを確認します。

   adb logcat

エラーメッセージやスタックトレースを確認し、問題の根本原因を特定します。特に、ネットワークリクエストに関連するエラーを探します。

この方法では、直接的なエラーメッセージを確認することで、問題解決の手助けになります。

エラーの予防方法

定期的なメンテナンス: 開発中のアプリは、定期的に依存関係や環境設定を見直し、最新の状態に保つことが重要です。
セキュリティ設定の確認: ATSの設定を適切に行い、HTTPリクエストが必要な場合は、最小限のドメインに対してのみ許可するようにします。
テスト環境の整備: 開発環境やテスト環境を整備し、実機での動作確認を行うことで、エラーの早期発見につながります。

まとめ

「Network request failed」というエラーは、React Native開発において一般的な問題ですが、適切な手順を踏むことで解決できます。ATSの設定やローカルサーバーへのアクセス方法を見直すことで、エラーを回避し、スムーズな開発を続けることができるでしょう。今後の開発では、これらのポイントを意識し、エラーの発生を未然に防ぎましょう。