環境
- 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ではコンソールでデータが取得できていることは確認済み）
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の書き方を変えてみる
下記記事を参考にコードを修正してみるも変化なし。
await axios.get(`http://localhost/api/gym`, {
headers: {
'Content-type': 'Application/json',
'Accept': 'Application/json',
},
data: {},
})
LaravelのCORS設定を有効にしてみる
下記記事を参考に設定してみるも変化なし。
４．原因
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をインストール
- egrokの設定
- egrok起動
ngrok http 80
起動すると Forwording https://XXXXXXXX.ngrok.io -> localhost と出てくるのでコード内の http://localhost の箇所を https://XXXXXXXX.ngrok.io に変更する。
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);
}
}
データが取得できた。