Kimama-IT

ITに関する覚書き

【Flutter/Dart】CORSポリシーエラーによりImage.network()で画像が取得できないときの対処法

Flutter Dart

Web(Chrome)使用時に、CORSポリシーエラーによりImage.network()が画像を取得できないときの対処メモです。

参照したページ
docs.flutter.dev
docs.flutter.dev

対処法１：コンソールからrunコマンドを使用してHTMLレンダーで実行する。

flutter run -d chrome --web-renderer html

対処法２：webフォルダの中のindex.htmlの内容を書き換えてHTMLレンダーで実行する。

web -> index.htmlのbody要素を以下に書き換える。
let useHtml= true;　でHTMLレンダーで実行
let useHtml= false;　でCanvasKitレンダーで実行

<body>
  <script>
    let useHtml = true;

    window.addEventListener('load', function(ev) {
    _flutter.loader.loadEntrypoint({
      serviceWorker: {
        serviceWorkerVersion: serviceWorkerVersion,
      },
      onEntrypointLoaded: function(engineInitializer) {
        let config = {
          renderer: useHtml ? "html" : "canvaskit",
        };
        engineInitializer.initializeEngine(config).then(function(appRunner) {
          appRunner.runApp();
        });
      }
    });
  });
  </script>
</body>

lib -> main.dart

import 'package:flutter/material.dart';

void main() {
  // Web(chrome)でこのまま実行すると、CORSでエラーとなり画像が表示されない。
  // 以下のコマンドで実行して、htmlレンダーに変更することでエラーを回避する。
  // flutter run -d chrome --web-renderer html
  // または、webフォルダの中のindex.htmlの内容を書き換えることでhtmlレンダーに変更することができる。
  final imgNet1 = Image.network(
    'https://placehold.jp/150x150.png',
  );

  final imgNet2 = Image.network(
    'https://placehold.jp/3d4070/ffffff/150x150.png',
  );

  final imgNet3 = Image.network(
    'https://picsum.photos/250?image=9',
  );

  final col = Column(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [imgNet1, imgNet2, imgNet3],
  );

  final a = MaterialApp(
    home: Scaffold(
      body: Center(
        child: col,
      ),
    ),
  );
  runApp(a);
}