環境

Macbook Air 2020
react 18.0.0
react-native 0.69.4
expo 46.0.6
React Native Debugger 0.13.0
iPhone12 mini
ios 15.6

１．状況

トレーニングマシン予約アプリを作成中、React NativeにてaxiosでAPI（Laravel）からジム一覧データを取得し、一覧表示させている。
動作確認のため、Expo Goアプリを使用し自分のiPhoneでアクセスしたところ、Nettwork Error が出ておりAPIからデータが取得できていなかった。
（React Native Debuggerではコンソールでデータが取得できていることは確認済み）

Gym.tsx

useEffect(() => {
  getGymAll();
}, []);

/**
 * 登録している全ジムデータを取得
 */
const getGymAll = async () => {
  try {
    const { data } = await axios.get(`http://loalhost/api/gym`);
    setGyms(data);
    console.log(data);
  } catch (error) {
    console.log(error.message);
  }
}

アクセスした際に getGymAll メソッドが実行され、取得したデータをステートにセットしている。

２．エラー内容

Axios Error : "Nettwork Error"

３．調査

axiosの書き方を変えてみる

下記記事を参考にコードを修正してみるも変化なし。

https://github.com/axios/axios/issues/3192

Gym.tsx

await axios.get(`http://localhost/api/gym`, {
  headers: {
    'Content-type': 'Application/json',
    'Accept': 'Application/json',
  },
  data: {},
})

LaravelのCORS設定を有効にしてみる

下記記事を参考に設定してみるも変化なし。

https://takabus.com/tips/341/#toc2

４．原因

http にリクエストを送っているのが原因のよう。

https://stackoverflow.com/questions/38418998/react-native-fetch-network-request-failed

記事の中で 「iOSはデフォルトでHTTPリクエストを許可しておらず、HTTPSのみ許可している」 との記載があった。

The problem here is that iOS does not allow HTTP requests by default, only HTTPS.
ここで問題となるのは、iOSはデフォルトでHTTPリクエストを許可しておらず、HTTPSのみ許可していることです。

５．解決策

egrok を使用し、 https://XXXXXXXX.ngrok.io アクセスしたらlocalhost にフォワーディングさせるようにした。

egrokをインストール

https://ngrok.com/download

egrokの設定

https://qiita.com/miriwo/items/8c1e6550a5ab279d60b5

egrok起動

ngrok http 80

起動すると Forwording https://XXXXXXXX.ngrok.io -> localhost と出てくるのでコード内の http://localhost の箇所を https://XXXXXXXX.ngrok.io に変更する。

Gym.tsx

useEffect(() => {
  getGymAll();
}, []);

/**
 * 登録している全ジムデータを取得
 */
const getGymAll = async () => {
  try {
    const { data } = await axios.get(`https://XXXXXXXX.ngrok.io/api/gym`);
    setGyms(data);
    console.log(data);
  } catch (error) {
    console.log(error.message);
  }
}

データが取得できた。