headers - Cómo configurar correctamente el encabezado de solicitud Http en Angular 2

http headers angular 6

Question

Tengo una aplicación Ionic 2 que usa Angular 2, que envía un Http PUT a un servidor ASP.NET Core API. Este es el método que estoy usando para enviar la solicitud:

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);
}

Estoy configurando una clave / valor de autenticación en el objeto de encabezado.

Pero cuando recibo esta solicitud en el servidor, no puedo encontrar la clave de autenticación en el encabezado:

Como puede ver en la imagen, hay muchas claves en el encabezado, pero no las claves de contenido y autenticación que agregué manualmente al encabezado en la aplicación cliente.

¿Qué estoy haciendo mal?

Answer 1

Podemos hacerlo bien usando Interceptors . No tiene que establecer opciones en todos sus servicios ni administrar todas sus respuestas de error, solo defina 2 interceptores (uno para hacer algo antes de enviar la solicitud al servidor y otro para hacer algo antes de enviar la respuesta del servidor a su servicio)

1. Defina una clase AuthInterceptor para hacer algo antes de enviar la solicitud al servidor. Puede configurar el token de la API (recuperarlo de localStorage, consulte el paso 4) y otras opciones en esta clase.
2. Defina una clase responseInterceptor para hacer algo antes de enviar la respuesta del servidor a su servicio (httpClient). Puede administrar la respuesta de su servidor, el uso más común es verificar si el token del usuario es válido (si no se borra el token de localStorage y redirigirlo para iniciar sesión).

3. En su app.module, importe HTTP_INTERCEPTORS desde ''@ angular / common / http''. Luego agregue a sus proveedores los interceptores (AuthInterceptor y responseInterceptor). Al hacer esto, su aplicación considerará los interceptores en todas nuestras llamadas de httpClient.

4. En la respuesta http de inicio de sesión (use el servicio http ), guarde el token en localStorage.

5. Luego use httpClient para todos sus servicios de apirest.

Puede consultar algunas buenas prácticas en mi proyecto github here

Answer 2

Angular 4>

Puede elegir configurar los encabezados manualmente o hacer un interceptor HTTP que establezca automáticamente los encabezados cada vez que se realiza una solicitud.

A mano

Establecer un encabezado:

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

Configuración de encabezados:

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

Variable local (instancia inmutable nuevamente)

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()

La clase HttpHeaders es inmutable, por lo que cada conjunto () devuelve una nueva instancia y aplica los cambios.

De los docs angulares.

Interceptor HTTP

Una característica importante de @ angular / common / http es la intercepción, la capacidad de declarar interceptores que se encuentran entre su aplicación y el back-end. Cuando su aplicación realiza una solicitud, los interceptores la transforman antes de enviarla al servidor, y los interceptores pueden transformar la respuesta a su regreso antes de que su aplicación la vea. Esto es útil para todo, desde la autenticación hasta el registro.

De los docs angulares.

Asegúrese de usar @angular/common/http toda su aplicación. De esa manera, el interceptor captará sus solicitudes.

Paso 1, crea el servicio:

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);
        }
    }
}

Paso 2, agréguelo a su módulo:

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

Enlaces útiles:

• El interceptor no funciona correctamente .
• APP_INITIALIZER no funciona en combinación con el interceptor

Answer 3

Esto debería resolverse fácilmente importando encabezados de Angular:

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

Answer 4

Para nosotros utilizamos una solución como esta:

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

Referencia here

Answer 5

Su parámetro para las opciones de solicitud en http.put () debería ser del tipo RequestOptions. Intenta algo como esto:

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)

Answer 6

Tienes un error tipográfico.

Cambio: headers.append(''authentication'', ${student.token});

Para: headers.append(''Authentication'', student.token);

NOTA: la autenticación está en mayúscula