Как правильно установить заголовок запроса Http в Angular 2

Ответ 1

Ваш параметр для параметров запроса в http.put() должен иметь тип RequestOptions. Попробуйте что-то вроде этого:

let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('authentication', '${student.token}');

let options = new RequestOptions({ headers: headers });
return this.http
    .put(url, JSON.stringify(student), options)

Ответ 2

Угловой 4>

Вы можете либо установить заголовки вручную, либо создать перехватчик HTTP.

Вручную

Установка заголовка:

http
  .post('/api/items/add', body, {
    headers: new HttpHeaders().set('Authorization', 'my-auth-token'),
  })
  .subscribe();

Установка заголовков:

this.http
.post('api/items/add', body, {
  headers: new HttpHeaders({
    'Authorization': 'my-auth-token',
    'x-header': 'x-value'
  })
}).subscribe()

Локальная переменная (снова неизменный экземпляр)

let headers = new HttpHeaders().set('header-name', 'header-value');
headers = headers.set('header-name-2', 'header-value-2');

this.http
  .post('api/items/add', body, { headers: headers })
  .subscribe()

Класс HttpHeaders является неизменным, поэтому каждый set() возвращает новый экземпляр и применяет изменения.

Из угловых документов.

HTTP перехватчик

Основной особенностью @angular/common/http является перехват, возможность объявлять перехватчики, которые находятся между вашим приложением и бэкэндом. Когда ваше приложение делает запрос, перехватчики преобразуют его перед отправкой на сервер, и перехватчики могут преобразовать ответ на обратном пути до того, как ваше приложение его увидит. Это полезно для всего: от аутентификации до регистрации.

Из угловых документов.

Убедитесь, что вы используете @angular/common/http во всем приложении. Таким образом, ваши запросы будут перехватываться перехватчиком.

Шаг 1, создайте сервис:

import * as lskeys from './../localstorage.items';
import { Observable } from 'rxjs/Observable';
import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpHeaders } from '@angular/common/http';

@Injectable()
export class HeaderInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if (true) { // e.g. if token exists, otherwise use incomming request.
            return next.handle(req.clone({
                setHeaders: {
                    'AuthenticationToken': localStorage.getItem('TOKEN'),
                    'Tenant': localStorage.getItem('TENANT')
                }
            }));
        }
        else {
            return next.handle(req);
        }
    }
}

Шаг 2, добавьте его в свой модуль:

providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HeaderInterceptor,
      multi: true // Add this line when using multiple interceptors.
    },
    // ...
  ]

Полезные ссылки:

• Перехватчик не работает должным образом.
• APP_INITIALIZER не работает в сочетании с перехватчиком

Ответ 3

Это должно быть легко устранено путем импорта заголовков из Angular:

import { Http, Headers } from "@angular/http";

Ответ 4

Мы можем сделать это с помощью Interceptors. Вам не нужно устанавливать параметры во всех ваших сервисах не управляют всеми вашими ошибками, просто определите 2 перехватчика (один, чтобы сделать что-то перед отправкой запрос на сервер и один сделать что-то перед отправкой сервера ответ на ваш сервис)

• Определите класс AuthInterceptor, чтобы что-то сделать перед отправкой запроса на сервер. Вы можете установить токен api (получить его из localStorage, см. Шаг 4) и другие параметры этого класса.
• Определите класс responseInterceptor для выполнения чего-либо перед отправкой ответа сервера на вашу службу (httpClient). Вы можете управлять ответом вашего сервера, наиболее удобным для использования является проверка того, является ли токен пользователя действительным (если не явный токен из localStorage и перенаправление на логин).

• В app.module импортируйте HTTP_INTERCEPTORS из '@ angular/common/http'. Затем добавьте к вашим провайдерам перехватчики (AuthInterceptor и responseInterceptor). Выполнение этого приложения будет рассматривать перехватчики во всех наших вызовах HTTPClient.

• При ответе на адрес электронной почты (используйте http), сохраните токен в LocalStorage.

• Затем используйте httpClient для всех ваших служб apirest.

Вы можете проверить некоторые хорошие практики в моем github proyect здесь

Ответ 5

Для нас мы использовали такое решение:

this.http.get(this.urls.order + '&list', {
        headers: {
            'Cache-Control': 'no-cache',
        }
    }).subscribe((response) => { ...

Ссылка здесь

Ответ 6

У вас есть опечатка.

Изменить: headers.append('authentication', ${student.token});

Кому: headers.append('Authentication', student.token);

ПРИМЕЧАНИЕ Аутентификация выполняется заглавной