http - Angular - no envía encabezados en la solicitud de publicación

Estoy haciendo una solicitud de publicación y esto es lo que obtuve en mi servicio

...

const headers = new HttpHeaders();
headers
    .set('Content-Type', 'application/json; charset=utf-8')
    .set('Authorization', `Bearer' ${localStorage.getItem('token')}`);

return this.http.post<InitialData>(
    `${this.baseUrl}/api/Customers/InitialData`,
    { headers: headers });

...

Pero recibo este error -

HttpErrorResponse {encabezados: HttpHeaders, estado: 401, texto de estado: "Falta encabezado de autorización", URL: "https://pa-prod-***........"

¿Qué estoy haciendo mal?

------------------------------------

Cree los encabezados de la siguiente manera -

const headers = new HttpHeaders()
    .set('Content-Type', 'application/json; charset=utf-8')
    .set('Authorization', `Bearer' ${localStorage.getItem('token')}`);

y usarlo como -

return this.http.post<InitialData>(url, payload, { headers: headers });

------------------------------------

En realidad, los httpHeaders son inmutables. Puedes hacer algo como esto:

let headers = new HttpHeaders({
  "Content-Type": "application/json; charset=utf-8",
  Authorization: `Bearer ${localStorage.getItem("token")}`
});
console.log(headers.get('Content-Type'));

luego puedes pasarlo al http.post.

Mira esto: Problema

1

Gracias, ya lo intenté de esa manera pero no funcionó

- frescobar

26/03/2021 a las 21:02

------------------------------------

La sintaxis de tu publicación http es incorrecta. Estas pasando los encabezados in lugar del cuerpo de la solicitud.

const headers = new HttpHeaders();
headers = headers.set('Content-Type', 'application/json; charset=utf-8')
headers = headers.set('Authorization', `Bearer' ${localStorage.getItem('token')}`);

return this.http.post<InitialData>(
    `${this.baseUrl}/api/Customers/InitialData`,
    dataToPost, 
    {headers: headers}
);

------------------------------------

Este sería un buen tema para usar un interceptor

Crear interceptor

jwt.interceptor.ts

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';


@Injectable()
export class JwtInterceptor implements HttpInterceptor {
    constructor(private authenticationService: AuthenticationService) { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // add authorization header with jwt token if available
        let authToken = `Bearer ${localStorage.getItem('token')}`
        
        if (authToken) {
           request = request.clone({
             setHeaders: {
                ['Authorization']: authToken
             }
          });
        }

        return next.handle(request);
    }
}

En tu app.module.ts

providers: [
    ...
    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
]

Ahora, para todas las solicitudes realizadas, si existe un token de autenticación, se agregará a la solicitud

NB: compruebe cómo ha agregado el token de autenticación. Tiene un apóstrofe ' que no debería estar ahí

0

------------------------------------

Hay 2 problemas importantes en tu código:

El primero ha sido mencionado en la respuesta de Zam Abdul Vahid: estás dando los encabezados en el segundo parámetro (que es el cuerpo de la solicitud), en lugar del tercero. Si no tiene datos del cuerpo para proporcionar, puede simplemente poner nulo como segundo parámetro.

El segundo problema ha sido mencionado por programoholic, donde le explica que los HttpHeaders son inmutables, es decir, no puede modificarlos directamente, el método set devolverá el nuevo objeto poblado.

También tienes una comilla simple sobrante después del Portador, que no debería ser necesaria.

Entonces, al final, si haces algo como encadenar tus llamadas establecidas, el siguiente código debería funcionar:

const headers = new HttpHeaders().set('Content-Type', 'application/json; charset=utf-8').set('Authorization', `Bearer ${localStorage.getItem('token')}`);

return this.http.post<InitialData>(
    `${this.baseUrl}/api/Customers/InitialData`,
     null,
    { headers }
);