Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Como colocar os headers no Observable<HttpResponse<any>>

Boa tarde,

Eu tenho um servidor spring boot e estou seguindo as aulas do Angular, quando faço a requisição para ele ele recusa com status 415. Antes desse erro aparecer eu estava colocando os readers dentro da requisição do post, mas quando houve a atualização da aula adicionando o Observable<HttpResponse>, ele começo a rejeitar minhas requisições;

meu AutenticacaoService esta desta forma:

import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { UsuarioService } from './usuario/usuario.service';
import { tap } from 'rxjs/operators'

    @Injectable({
      providedIn: 'root',
    })
    export class AutenticacaoService {
      readonly URL = 'http://localhost:7225/usuario';

      constructor(
        private httpCliente: HttpClient,
        private usuarioService: UsuarioService
      ) {}

      // Headers
      httpOptions = {
        headers: new HttpHeaders({
          'Access-Control-Allow-Headers':
            'Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers',
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Methods': 'GET, POST, OPTIONS, PUT, PATCH, DELETE',
          'Content-Type': 'application/json; charset=UTF-8',
        }),
      };

      autenticar(usuario: string, senha: string): Observable<HttpResponse<any>> {
        return this.httpCliente.post(
          `${this.URL}/isUsuario`,
          JSON.stringify({
            usuario: usuario,
            senha: senha,
          }),
          { observe: 'response' }
        ).pipe(
          tap((res) =>{
            const authToken = res.headers.get('x-acess-token') ?? '';
            this.usuarioService.salvaToken(authToken);
          })
        )
      }
    }

Alguém poderia me informar uma solução, de como eu colocaria o header dentro da requisição?

1 resposta
solução!

Olá, Wallyson! Tudo certo?

O método post() recebe as opções como terceiro parâmetro, e você inclusive está usando esse parâmetro, passando o observe.

Tanto o observe quanto o headers fazem parte do mesmo objeto. Então, resumidamente, o objeto que você passa como terceiro parâmetro possui o seguinte formato:

options: {
        headers?
        observe?
        params?
        reportProgress?
        responseType?
        withCredentials?
}

Perceba que todas as propriedades são opcionais (o ? indica isso).

Assim, você pode passar observe: 'response' dentro do seu objeto httpOptions mesmo, ou fazer o spread do seu httpOptions no objeto que você está passando observe: 'response': { ...httpOptions, observe: 'response' }.

Se precisar, a documentação do Angular tem vários exemplos: Communicating with backend services using HTTP.

Espero ter ajudado!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software