Flutter WebでHosting Domain以外の画像が表示されない問題の解決方法

はじめに

@yutakikuchi_です。
FlutterでWebサービスを開発してHostingした際に、他のDomainにResourceがある画像が表示されないという問題が発生したので、解決方法を書きます。

Displaying images on the web

解決方法

通常のFlutter Web hostingだと他ドメインの画像がCORS Policyによって撥ねられるのですが、それを解決する方法は上のURLに書いてあります。

Host your images in a CORS-enabled CDN.

僕の場合は、Flutter WebのHosting先がFirebaseだったので、FirebaseにDeployをするときに設定ファイルであるfirebase.jsonに対して、CORSリクエストを許可する設定を追記しました。下記はサンプルですが、Access-Control-Allow-Originを*で指定するのはセキュリティ的に良くないとされているので、適切な値を設定したほうが良いです。

"headers": [
     {
       "source" : "**",
       "headers" : [
         {
           "key" : "Access-Control-Allow-Origin",
           "value" : "*"
         }
       ]
     }
   ]

Lack control over the image server? Use a CORS proxy.
Use <img> in a platform view.

FirebaseでResponse Headerを追加する以外にもCORSのProxyサーバーを中継する、具体的にはCloudFlare, Firebase Functionsなど。またはFlutterのコーディングの中でHtmlElementViewを使って<img>タグを使うなど方法があるようです。