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

У меня есть приложение Ionic 2, использующее Angular 2, которое отправляет PUT Http на сервер ASP.NET Core API. Вот метод, который я использую для отправки запроса:

public update(student: Student): Promise<Student>
{
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('authentication', '${student.token}');

    const url = '${this.studentsUrl}';

    return this.http
        .put(url, JSON.stringify(student), { headers: headers })
        .toPromise()
        .then(() => student)
        .catch(this.handleError);
}

Я устанавливаю ключ/значение аутентификации для объекта заголовков.

Но когда я получаю этот запрос на сервере, я не могу найти ключ аутентификации в заголовке:

Как вы можете видеть на картинке, в заголовке много ключей, но нет ключей содержимого и аутентификации, которые я вручную добавил в заголовок в клиентском приложении.

Что я делаю неправильно?

Ответ 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.
    },
    // ...
  ]

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

Ответ 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);

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