[Flutter] NetworkImageLoadException 오류 해결

novellus·2024년 10월 9일

error flutter

문제를 해결해보자

목록 보기

2/3

NetworkImageLoadException 및 User-Agent 설정 문제

Image.network(url)을 사용해 특정한 url에서 image를 불러올 때 문제가 발생했다.

1. User-Agent의 개념

User-Agent란?

User-Agent는 웹 요청을 보낼 때 클라이언트(즉, 브라우저나 애플리케이션)가 서버에 자신을 식별할 목적으로 전달하는 문자열이다. 이 문자열은 요청을 보낸 프로그램의 이름, 버전, 운영 체제 등의 정보를 포함하고 있어, 서버가 요청을 구분하고 최적화된 응답을 제공하는 데 도움을 준다.

예시: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36

위의 예시는 Chrome 브라우저에서 보낸 요청임을 나타내는 User-Agent 문자열이다.

2. 문제의 원인

Flutter의 Image.network() 위젯을 사용할 때 기본적으로 Dart의 HTTP 클라이언트는 다음과 같은 User-Agent 값을 사용한다:

Dart/<version> (dart:io)

이 기본 User-Agent 값은 서버에 의해 봇이나 스크래퍼로 인식될 수 있으며, 그 결과로 서버는 비정상적인 요청을 차단하기 위해 해당 요청을 차단하여 403 Forbidden 오류를 반환할 수 있다.

3. 해결 방법

방법 1: 로컬 User-Agent 오버라이드

특정 요청에 대해서만 User-Agent 값을 브라우저 값으로 설정하여 문제를 해결할 수 있다. 이 방법은 개별 요청에 User-Agent 값을 지정하는 방식으로, 각 이미지 로딩 시 사용할 수 있다.

child: Image.network(
  webtoon.thumb,
  headers: const {
    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; iPhone; CPU iPhone OS 13_5_1 like Mac OS X) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36",
  },
),

이 코드는 User-Agent를 명시적으로 설정하여 서버가 요청을 정상적인 브라우저 요청으로 인식하도록 한다.

방법 2: 전역 User-Agent 오버라이드

앱 전체에서 모든 네트워크 요청에 대해 User-Agent 값을 설정할 수도 있다. 이를 위해 HttpOverrides 클래스를 사용하여 Flutter 애플리케이션의 전역 HTTP 클라이언트를 오버라이드할 수 있다.

import 'dart:io';

class MyHttpOverrides extends HttpOverrides {
  @override
  HttpClient createHttpClient(SecurityContext? context) {
    return super.createHttpClient(context)
      ..userAgent = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; iPhone; CPU iPhone OS 13_5_1 like Mac OS X) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36';
  }
}

void main() {
  HttpOverrides.global = MyHttpOverrides();

  runApp(const App());
}

이 방법은 앱 내 모든 HTTP 요청이 동일한 User-Agent를 사용하도록 설정하므로, 모든 네트워크 요청에서 User-Agent 문제를 한 번에 해결할 수 있다.

4. HttpOverrides

HttpOverrides란?

HttpOverrides는 Flutter의 HTTP 클라이언트 동작을 전역적으로 오버라이드할 수 있는 클래스이다. 이 클래스를 사용하면 앱 내 모든 네트워크 요청에 대해 기본 설정을 변경할 수 있어, User-Agent와 같은 HTTP 헤더를 쉽게 수정할 수 있다.

사용 목적: 네트워크 요청의 기본 동작을 커스터마이징하여, 모든 요청이 동일한 방식으로 처리되도록 설정할 수 있다.
장점: 앱 전체에서 일관된 네트워크 설정을 적용할 수 있어, 개별 요청에 일일이 설정할 필요가 없다. 위의 코드의 경우 전역 설정(HttpOverrides)을 사용해 개별 요청마다 User-Agent를 설정할 필요가 없으므로 코드의 유지보수성이 향상된다.

요약

서버는 비정상적인 요청을 차단하기 위해 User-Agent 헤더를 검사한다. 브라우저의 User-Agent로 요청을 보내면, 서버가 이를 합법적인 요청으로 인식하고 응답하게 된다.
User-Agent를 설정하면 서버가 클라이언트를 식별하고 적절한 데이터를 제공할 수 있으며, 악성 트래픽을 필터링하는 데도 도움을 준다.
User-Agent가 문제를 해결하기 위해서는 로컬 또는 전역적으로 User-Agent를 브라우저 값으로 설정해 주어야 한다.
HttpOverrides를 사용하면 앱 전체의 네트워크 요청을 한 번에 오버라이드할 수 있으므로, 코드의 유지보수성과 일관성을 높일 수 있다.