Заголовки играют решающую роль в веб-разработке, обеспечивая связь между клиентом и сервером путем передачи важной информации. В Angular добавление заголовков к HTTP-запросам является распространенным требованием при взаимодействии с API или выполнении аутентификации. В этой статье мы рассмотрим несколько методов добавления заголовков в Angular с разговорными объяснениями и примерами кода.

Метод 1: добавление заголовков в отдельные HTTP-запросы
Самый простой способ добавить заголовки в Angular — включить их непосредственно в отдельные HTTP-запросы. Вот пример:

import { HttpClient, HttpHeaders } from '@angular/common/http';
// ...
const headers = new HttpHeaders().set('Authorization', 'Bearer your_token_here');
this.http.get('https://api.example.com/data', { headers }).subscribe((data) => {
  // Process the response
});

В этом методе мы создаем экземпляр HttpHeaders и устанавливаем нужные заголовки перед выполнением HTTP-запроса.

Метод 2: использование перехватчиков HTTP
Angular предоставляет перехватчики HTTP, которые позволяют нам перехватывать и изменять HTTP-запросы глобально внутри нашего приложения. Используя перехватчики, мы можем добавлять заголовки к нескольким запросам без дублирования кода. Вот пример перехватчика, который добавляет заголовок авторизации:

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const modifiedRequest = request.clone({
      setHeaders: {
        Authorization: 'Bearer your_token_here'
      }
    });
    return next.handle(modifiedRequest);
  }
}

Чтобы использовать перехватчик, нам необходимо предоставить его в модуле приложения:

import { HTTP_INTERCEPTORS } from '@angular/common/http';
// ...
@NgModule({
  // ...
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }

При таком подходе AuthInterceptorавтоматически добавит заголовок авторизации ко всем исходящим HTTP-запросам.

Метод 3: настройка заголовков по умолчанию
Другой способ добавить заголовки глобально — настроить заголовки по умолчанию HttpClient. Этот метод полезен, когда у вас есть заголовки, которые необходимо последовательно добавлять к каждому запросу. Вот пример:

import { HttpClient, HttpHeaders } from '@angular/common/http';
// ...
const defaultHeaders = new HttpHeaders().set('Content-Type', 'application/json');
this.http.get('https://api.example.com/data', { headers: defaultHeaders }).subscribe((data) => {
  // Process the response
});

В этом методе мы определяем заголовки по умолчанию и передаем их в качестве опции HTTP-запроса. Эти заголовки будут включены во все последующие запросы, выполняемые с использованием HttpClient.

Добавление заголовков в Angular необходимо для многих веб-приложений. В этой статье мы рассмотрели три метода: добавление заголовков в отдельные HTTP-запросы, использование HTTP-перехватчиков и настройку заголовков по умолчанию. Следуя этим примерам, вы сможете легко интегрировать заголовки в свои проекты Angular, обеспечивая бесперебойную связь между вашим приложением и API.