FlutterFlowでAPIコールが動作しない問題への対処法

まず、この不具合はFlutterFlowに依存する問題ではないことあらかじめをお伝えしておきます。

以下のような現象が出ている方に有効かもしれません。

・Runモードやモバイルアプリでビルドしたものでは動いているのに、ローカルでビルドした後に、FirebaseでHostingしたら動かなくなってしまった。

・FlutterFlowでWeb Publishをした後に動かなくなった。

・ビルドしたアプリの内容をWebで公開したらバグや挙動が違うといったことが起きた。

ブラウザ検証モードを使ってログを確認したところ、CORS ERRORというのが確認されました。

以下のような感じでログが出ました。

CORSについてはこちらを参照: https://qiita.com/koji4104/items/65bba670f0519a23b9f6

簡単に説明すると、今開いているサイトから別のIPアドレス上に存在するAPIをコールするときに、ブラウザ側で自動的にセキュリティのブロックがかかってしまい、そのあとの処理が止まってしまうといったイメージです。

上記の手順で解消されました。

※FirebaseHostingを使って、手動でホスティングを行うパターンも試しましたが、こちらでは問題が解消されなかったため、急ぎであればFlutterFlow経由の公開をお勧めします。