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

Necesitamos tu apoyo para compartir nuestras secciones en referencia a las ciencias informáticas.

Solución:

Su parámetro para las opciones de solicitud en http.put() en realidad debería ser del tipo RequestOptions. Prueba 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)

Angular 4 >

Puede optar por establecer los encabezados a manoo hacer un interceptor HTTP que establece automáticamente los encabezados cada vez que se realiza una solicitud.

---

A mano

Configuración de 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 de nuevo)

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 set() devuelve una nueva instancia y aplica los cambios.

De los documentos 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 backend. Cuando su aplicación hace una solicitud, los interceptores la transforman antes de enviarla al servidor, y los interceptores pueden transformar la respuesta antes de que su aplicación la vea. Esto es útil para todo, desde la autenticación hasta el registro.

De los documentos angulares.

Asegúrate de usar @angular/common/http a lo largo de su aplicación. De esa manera, sus solicitudes serán capturadas por el interceptor.

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, next: HttpHandler): Observable> 
        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égalo a tu 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

Para nosotros usamos una solución como esta:

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

Referencia aquí

Si tienes alguna cuestión y forma de aumentar nuestro tutorial te recordamos ejecutar una nota y con deseo lo leeremos.

---

---

Utiliza Nuestro Buscador