현상
크롬에서 Flutter 빌드 시 아래와 같은 오류가 발생했다.
════════ Exception caught by image resource service ════════════════════════════
Failed to load network image.
Image URL: https://i.pinimg.com/564x/89/31/36/8931368c1ec410f73ee0615b531ae32e.jpg
Trying to load an image from another domain? Find answers at:
https://flutter.dev/docs/development/platform-integration/web-images
════════════════════════════════════════════════════════════════════════════════
1. 맥북에서 IOS로 빌드할때는 해당 문제 없이 외부도메인의 리소스 접근이 허용된다. ( 문제 없음 )
2. 같은 소스를 윈도우에서 크롬으로 빌드.
3. 크롬으로 빌드시 localhost[특정포트]로 웹서버 처럼 Flutter 실행 됨, 해당 과정에서 다른 도메인에 위치한 리소스 참조( CORS )로 인해 이미지 조회 오류 발생.
해결방안
스택오버플로우에 본 오류와 관련한 자세한 내용이 이미 있다.
아래의 순서대로 솔루션이 나와있다.
1- Go to flutter\bin\cache and remove a file named: flutter_tools.stamp
2- Go to flutter\packages\flutter_tools\lib\src\web and open the file chrome.dart.
3- Find '--disable-extensions'
4- Add '--disable-web-security'위 내용을 dart pub 모듈을 사용해서 더 간단히 처리 할 수 있다. ( 필자는 이 방법으로 처리 )
dart pub global activate flutter_cors
+ flutter_cors 1.2.0
Downloading flutter_cors 1.2.0...
Downloading args 2.3.0...
Building package executables...
Built flutter_cors:flutter_cors.
Installed executable fluttercors.
Warning: Pub installs executables into C:\Users\***\AppData\Local\Pub\Cache\bin, which is not on your path.
A web search for "configure windows path" will show you how.
Activated flutter_cors 1.2.0.! 설치 후 위의 Warning 처럼, flutter_cors 실행파일이 위치한 디렉토리가 환경변수 패스에 등록되지 않은 경우, 등록해준다.
CORS 설정
C:\Users\***>fluttercors --disable
Patching D:\flutter/packages/flutter_tools/lib/src/web/chrome.dart
Deleting D:\flutter/bin/cache/flutter_tools.stamp
CORS is now disabled for Flutter's Chrome instance
C:\Users\***>fluttercors --enable
Patching D:\flutter/packages/flutter_tools/lib/src/web/chrome.dart
Deleting D:\flutter/bin/cache/flutter_tools.stamp
CORS is now enabled for Flutter's Chrome instance명령 실행 후 빌드를 재실행한다.
반응형