FlutterFlowでAPIコールが動作しない問題への対処法
まず、この不具合はFlutterFlowに依存する問題ではないことあらかじめをお伝えしておきます。
問題
以下のような現象が出ている方に有効かもしれません。
・Runモードやモバイルアプリでビルドしたものでは動いているのに、ローカルでビルドした後に、FirebaseでHostingしたら動かなくなってしまった。
・FlutterFlowでWeb Publishをした後に動かなくなった。
・ビルドしたアプリの内容をWebで公開したらバグや挙動が違うといったことが起きた。
原因
ブラウザ検証モードを使ってログを確認したところ、CORS ERRORというのが確認されました。
以下のような感じでログが出ました。
CORSについてはこちらを参照: https://qiita.com/koji4104/items/65bba670f0519a23b9f6
簡単に説明すると、今開いているサイトから別のIPアドレス上に存在するAPIをコールするときに、ブラウザ側で自動的にセキュリティのブロックがかかってしまい、そのあとの処理が止まってしまうといったイメージです。
解消手順
1.APIコールのAdvanced Settingsを開き、Make PrivateをONにする。
2.Deploy Private APIsをONにして、Cloud Function上にAPIコールの関数をデプロイする。
3.FlutterFlow経由でWebにPublishする
上記の手順で解消されました。
※FirebaseHostingを使って、手動でホスティングを行うパターンも試しましたが、こちらでは問題が解消されなかったため、急ぎであればFlutterFlow経由の公開をお勧めします。