🍃

【Flutter】Flutter webのImage.Network()でCORSエラーが発生するときの対処法

2022/10/27に公開約700字

この記事の概要

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

と実行する.

理由

次のページに理由が書かれていました.

https://stackoverflow.com/questions/65653801/flutter-web-cant-load-network-image-from-another-domain

Flutterには,2つのレンダー方法がある.

  1. CanvasKitレンダー
  2. HTMLレンダー
    どうやらflutter webでは,autoで1のcanvaskitレンダーになるらしい.

https://docs.flutter.dev/development/platform-integration/web/web-images

公式ドキュメントにもあるように,<img>を用いて画像を表示するために,HTMLレンダーを指定するとうまくいくよう.

CanvasKitでは,日本語フォントがうまく表示されないなどの問題もあるみたい.

Discussion

ログインするとコメントできます