Development/Flutter (Dart)
[SOLVED][Flutter3] throw error; // Ensures the error message is printed to the console. I/flutter (13068): HTTP request failed, statusCode: 403, https://image-comic.pstatic.net/webtoon/654774/thumbnail/thumbnail_IMAG21_4048794550434817075.jpg
Tradgineer
2024. 1. 2. 13:42
0. 작업 환경
Mac M2
1. 문제 상황
문제가 발생하는 소스코드 예시
// thumb : String type
final Image thumbImg = Image.network(
thumb,
);
아래 소스코드처럼, error 내용을 String으로 출력해 상세 내용 확인이 가능하다.
print(error.toString());
// vim image.dart
// ...
ImageStreamListener? _imageStreamListener;
ImageStreamListener _getListener({bool recreateListener = false}) {
if (_imageStreamListener == null || recreateListener) {
_lastException = null;
_lastStack = null;
_imageStreamListener = ImageStreamListener(
_handleImageFrame,
onChunk: widget.loadingBuilder == null ? null : _handleImageChunk,
onError: widget.errorBuilder != null || kDebugMode
? (Object error, StackTrace? stackTrace) {
setState(() {
_lastException = error;
_lastStack = stackTrace;
});
assert(() {
if (widget.errorBuilder == null) {
// ignore: only_throw_errors, since we're just proxying the error.
print(error.toString());
throw error; // Ensures the error message is printed to the console.
}
return true;
}());
}
: null,
);
}
return _imageStreamListener!;
}
// ...
필자의 경우 콘솔에 출력된 오류 내용은 다음과 같다.
I/flutter (13068): HTTP request failed, statusCode: 403, https://image-comic.pstatic.net/webtoon/654774/thumbnail/thumbnail_IMAG21_4048794550434817075.jpg
2. 문제 원인
403 에러 발생으로 인해 image를 불러오지 못한다. 원인은, naver에서 자체적으로 수상한 접근으로 의심되면 403을 return한다.
3. 해결 방법
Image.network 내에 headers 추가
headers: const {
"User-Agent":
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36",
},
// vim webtoon_widget.dart
// ...
@override
Widget build(BuildContext context) {
final Image thumbImg = Image.network(
thumb,
headers: const {
"User-Agent":
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36",
},
);
// ...
4. 해결 완료 예시 화면