[Flutter Web] "Failed to load network image" CORS 해결

Flutter App에서 정상적으로 사용하던 Widget을 가져와서 이미지 로딩을 해보았다.

왠걸.. App에 수도없이 박혀있는 이미지 로딩 코드가 이상한 에러를 뱉어낸다.

보기 싫은 X자 이미지와 함께..

 

빨간색으로 표시한 것처럼 보기싫은 X자와 함께 이미지 로딩 Fail

 

App에서는 주로 경로가 안 맞아 발생하는 에러여서 이미지 경로를 찾아보니,

브라우저에서 정상적으로 이미지를 로딩하고 있다.

 

Flutter 공식문서를 찾아보니..

 

Flutter는 웹에서 두 가지 렌더러를 선택할 수 있습니다.

• HTML : 이 렌더러는 HTML, CSS, Canvas 2D 및 SVG의 조합을 사용하여 UI를 렌더링합니다. 요소를 사용하여 <img>이미지를 렌더링합니다.
• CanvasKit : 이 렌더러는 WebGL을 사용하여 UI를 렌더링하므로 이미지의 픽셀에 액세스해야 합니다.

이런 설명이 나온다 ㅠ 

 

일단, html 렌더러를 사용하는 방법을 사용해 보겠다.

터미널창에 아래 커맨드를 복사해서 실행해보았다.

 

flutter run -d chrome --web-renderer html

 

깔끔하게 프로필 사진 또는 디폴트 이미지를 가져오고 있다.

 

같은 내용을 릴리스모드로 빌드할때는 아래와 같은 커맨드를 쓰면 된다.

 

flutter build web --web-renderer html --release