👻

Expo Androidアプリでhttp通信を許可する

2023/10/14に公開

ExpoでAndroidアプリを開発時に起きた通信エラーについて

経緯

localのAPIサーバーにHTTPリクエストするAndroidアプリ
AndroidデバイスにてExpoアプリをインストールしExpoアプリ内部でデバッグをしている際にはHTTPリクエスト時のエラーは出なかった
Expo build後、Internal distributionで配布したアプリのみAPIとの通信エラーが発生した
fetchのエラーメッセージを確認してもTypeError: fetch failedの表示のみ

原因

AndroidではHTTPSでのセキュアな通信を前提としておりHTTPを利用するにはネットワーク設定を変更する必要がある
Opt out of cleartext traffic

解決策

Expoで上記の設定をするためにExpo BuildPropertiesをインストール
npx expo install expo-build-properties

app.jsonのpluginsに以下を追加

[
  "expo-build-properties",
  {
   "android": {
     "usesCleartextTraffic": true
   }
  }
]

Discussion