🍃
【Flutter】Flutter webのImage.Network()でCORSエラーが発生するときの対処法
この記事の概要
Flutter webで開発をしている際，YouTubeのサムネイル取得URL(i.ytimg.com)を用いて画像を表示する時に，CORSエラーが発生していました．その対処法を備忘録として残します．
問題
- localhost環境では，エラーなく画像が取得・表示できる
- デプロイを行い(Firebae hosting)，本番環境ではCORSエラーが発生する
解決
ビルドを行うときに，
flutter build web
ではなく，
flutter build web --web-renderer html
を用いるようにする．
ちなみに，開発環境においては，
flutter run -d chrome --web-renderer html
と実行する．
理由
次のページに理由が書かれていました．
Flutterには，2つのレンダー方法がある．
- CanvasKitレンダー
- HTMLレンダー
どうやらflutter webでは，autoで1のcanvaskitレンダーになるらしい．
公式ドキュメントにもあるように，<img>を用いて画像を表示するために，HTMLレンダーを指定するとうまくいくよう．
CanvasKitでは，日本語フォントがうまく表示されないなどの問題もあるみたい．
Discussion