HttpClient 설정하기

Angular v21 이상에서는 별도 설정 없이 HttpClient를 주입할 수 있습니다.

의존성 주입으로 HttpClient 제공하기

app.config.ts의 애플리케이션 providers에서 provideHttpClient 헬퍼 함수를 사용하면 기본 HTTP 기능을 설정하거나 추가 기능을 활성화할 수 있습니다.

export const appConfig: ApplicationConfig = {
  providers: [provideHttpClient(/* withInterceptors(...) 등의 기능을 여기에 추가합니다. */)],
};

NgModule 기반으로 부트스트랩하는 애플리케이션이라면 애플리케이션 NgModule의 프로바이더에 provideHttpClient를 포함하여 기본 HTTP 기능을 설정하거나 추가 기능을 활성화할 수 있습니다:

@NgModule({
  providers: [provideHttpClient(/* withInterceptors(...) 등의 기능을 여기에 추가합니다. */)],
  // ... 애플리케이션의 다른 설정
})
export class AppModule {}

이제 컴포넌트, 서비스, 다른 클래스에 HttpClient 서비스를 의존성으로 주입할 수 있습니다:

@Service()
export class ConfigService {
  private http = inject(HttpClient);
  // 이제 이 서비스에서 `this.http`로 HTTP 요청을 보낼 수 있습니다.
}

HttpClient 기능 설정하기

provideHttpClient에는 클라이언트의 여러 기능을 활성화하거나 설정하는 선택적 기능 설정 목록을 전달할 수 있습니다. 이 섹션에서는 선택적으로 사용할 수 있는 기능과 사용 방법을 알아봅니다.

withXhr

export const appConfig: ApplicationConfig = {
  providers: [provideHttpClient(withXhr())],
};

HttpClient는 기본적으로 fetch API로 요청을 보냅니다. withXhr 기능을 사용하면 대신 XMLHttpRequest API를 사용하도록 바꿀 수 있습니다.

fetch는 더 현대적인 API이며, XMLHttpRequest를 지원하지 않는 일부 환경에서도 사용할 수 있습니다. 다만 업로드 진행 상황 이벤트를 제공하지 않는 등의 제약이 있습니다.

withInterceptors(...)

withInterceptors는 HttpClient가 보내는 요청을 처리할 인터셉터 함수 목록을 설정합니다. 자세한 내용은 인터셉터 가이드를 참고하세요.

withInterceptorsFromDi()

withInterceptorsFromDi는 이전 방식인 클래스 기반 인터셉터를 HttpClient 설정에 포함합니다. 자세한 내용은 인터셉터 가이드를 참고하세요.

withRequestsMadeViaParent()

특정 인젝터에서 provideHttpClient로 HttpClient를 설정하면, 기본적으로 상위 인젝터에 있는 HttpClient 설정보다 이 설정이 우선합니다.

withRequestsMadeViaParent()를 추가하면 현재 수준에 설정한 인터셉터를 모두 거친 뒤 요청을 상위 인젝터의 HttpClient 인스턴스로 전달하도록 바뀝니다. 상위 인젝터의 인터셉터를 거쳐 요청을 보내면서 하위 인젝터에 인터셉터를 추가 하고 싶은 경우에 유용합니다.

withJsonpSupport()

withJsonpSupport를 포함하면 HttpClient의 .jsonp() 메서드를 사용할 수 있습니다. 이 메서드는 다른 도메인의 데이터를 불러오기 위해 JSONP 규약에 따라 GET 요청을 보냅니다.

withXsrfConfiguration(...)

이 옵션을 포함하면 HttpClient에 내장된 XSRF 보안 기능을 커스터마이징할 수 있습니다. 자세한 내용은 보안 가이드를 참고하세요.

withNoXsrfProtection()

이 옵션을 포함하면 HttpClient에 내장된 XSRF 보안 기능을 비활성화합니다. 자세한 내용은 보안 가이드를 참고하세요.

HttpClientModule 기반 설정

일부 애플리케이션은 NgModule 기반의 이전 API로 HttpClient를 설정할 수 있습니다.

다음 표는 @angular/common/http에서 제공하는 NgModule과 앞에서 살펴본 프로바이더 설정 함수의 대응 관계입니다.