ExpoでhttpのサイトやAPIを扱いたいときのworkaround

概要

Android/iOS共にデフォルトでhttpへのアクセスができないようになっている

By default, iOS 9.0 or later enforce App Transport Secruity (ATS). ATS requires any HTTP connection to use HTTPS. If you need to fetch from a cleartext URL (one that begins with http) you will first need to add an ATS exception. If you know ahead of time what domains you will need access to, it is more secure to add exceptions only for those domains; if the domains are not known until runtime you can disable ATS completely. Note however that from January 2017, Apple's App Store review will require reasonable justification for disabling ATS. See Apple's documentation for more information.

Networking · React Native

On Android, as of API Level 28, clear text traffic is also blocked by default. This behaviour can be overridden by setting android:usesCleartextTraffic in the app manifest file.

Networking · React Native

ローカルサーバーがhttpだったりすると、アプリからアクセスすることができないので困った。

workaround

app.jsonを変更し、Android/iOSの設定をいじる Dev Client使っているなら、変更したあとはEAS Buildする 雑なメモなので雑に書いているが、app.config.tsにして定義すれば、開発環境だけ無効にするとかもできるのでそうしたほうがいい

iOS向け

ios の項目で上書きする

  ios: {
    infoPlist: {
      NSAppTransportSecurity: {
        NSAllowsArbitraryLoads: true, // APIの呼び出しでhttpを許可
        NSAllowsArbitraryLoadsInWebContent: true //WebViewでhttpを許可
      },
    },
  },

Android向け

expo-build-properties で上書きする

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

Reference

Androidは以下をそのまま

stackoverflow.com

iOSは書き換える位置をGitHub Issue把握して、内容はQiitaを参考にした github.com qiita.com