[Flutter&Dart] <Error> Image.network 에러: to load resource: net::ERR_FAILED

오류

Image.network(url)을 통해 이미지를 불러올 때, 이미지가 표시되지 않는 에러가 발생한다.

크롬에 로컬으로 빌드된 이미지

로컬에서 빌드한 크롭 웹앱에서 발생하는 문제이며, VSC상의 debug console에는 나타나지 않는다.

크롬에서 F12키를 눌러 console에 들어가 오류를 확인하였다.

Chrome F12 > Console

크롬 Console로 확인한 에러

이미지가 CORS policy 때문에 block되었다는 내용이다.

*CORS (Cross-Origin Resource Sharing)

Chat GPT에게 어떤 내용인지 확인해보았다.

이 오류 메시지는 'http://localhost:63976' 출처에서 로드된 웹 페이지가 'http://www.mindgil.com/editor/cheditor_5/attach/20200811223229_dahmhhrl.jpg'에서 이미지를 가져오기 위해 XMLHttpRequest를 시도했지만, 브라우저의 CORS (Cross-Origin Resource Sharing) 정책에 의해 차단되었음을 나타냅니다.

이것은 웹 브라우저에서 다른 출처의 리소스에 대한 무단 액세스를 방지하기 위해 구현된 보안 기능입니다. 오류 메시지는 요청한 리소스에 필요한 'Access-Control-Allow-Origin' 헤더가 포함되어 있지 않기 때문에 브라우저가 요청하는 출처가 허용되는지 여부를 결정할 수 없다는 것을 명시적으로 나타냅니다.

이 문제를 해결하려면, 리소스를 호스팅하는 서버는 요청에 대한 적절한 CORS 헤더를 포함해야 합니다. 또는 웹 페이지는 서버 측 프록시를 사용하여 리소스를 가져와 페이지와 동일한 출처에서 제공함으로써 CORS 정책을 회피할 수 있습니다.

 

 

더미이미지 사이트에서 가져온 이미지는 깨지지 않지만, 인터넷 아무곳에서 긁어온 이미지는 위와같은 에러가 발생한다.

 

해결

Run Without Debuggingn

기존에 'Run Without Debugging' 을 사용하지 않고 명령어를 이용해 빌드하면 된다.

• flutter run -d chrome: 크롬을 통해 빌드
• --web-rendere html: HTML 렌더러를 사용하여 빌드

// HTML 웹 렌더러를 사용하여 빌드
$ flutter run -d chrome --web-renderer html

 

이렇게 빌드하면 문제없이 이미지가 잘 노출된다.