Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Requisição com POST, HEADERS e uso de INTERCEPTOR

Olá. Com base no que vi nos cursos de Angular aqui da Alura estou implementando uma requisição à minha API utilizando POST onde tanto a requisição e a resposta devem estar no formato JSON . Porém oque acontece no meu caso é que aparentemente o corpo e os cabeçalhos que estou enviando via POST somem em algum momento da minha aplicação. Verifiquei através do programa Fiddler Web Debugger que a requisição Http está sem os dados de corpo e cabeçalhos "Accept" e "Content-Type" que enviei na requisição. Vou colar aqui os códigos que acredito pertinentes à minha dúvida.

Serviço criado para comunicar com a API através do HttpClient

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { environment } from '../../../environments/environment';
import { IConsultaResultadoLoja } from './consulta-resultado-loja';

const API = environment.ApiUrl;
@Injectable({ providedIn: 'root'})
export class ConsultaResultadoLojaService {

    constructor(private http: HttpClient) { }

    search(dataIni: Date, dataFim: Date, loja: string) {

        const params = {
            "dataIni": dataIni,
            "dataFim": dataFim,
            "selectedLoja": {
                "codEstabeleciment": loja
            }
        };
        let headers = new HttpHeaders({
            "Content-Type":  "application/json",
            "Accept": "application/json"
          });
        let httpOptions = {
            headers: headers
          };
        console.log(params);
        console.log(httpOptions);
        return this.http
            .post<IConsultaResultadoLoja[]>(`${API}vendatauros/search`, params, httpOptions);
    }
}

Código do componente onde eu chamo o serviço citado acima no método search que é invocado no (submit) do meu formulário:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

import { AutoCompleteLojaService } from 'src/app/shared/components/autocomplete/loja/auto-complete-loja.service';
import { ConsultaResultadoLojaService } from './consulta-resultado-loja.service';

@Component({
    templateUrl: "./consulta-resultado-loja.component.html"
})
export class ConsultaResultadoLojaComponent implements OnInit{

    defaultForm: FormGroup;

    constructor(private fb: FormBuilder, 
                private acService: AutoCompleteLojaService,
                private consResLojaService: ConsultaResultadoLojaService) {}

    ngOnInit(): void {
        this.defaultForm = this.fb.group({
            dataIniInput: null,
            dataFimInput: null,
            lojaInput: null
        });
    }


    search() {
        const dataIni = this.defaultForm.get('dataIniInput').value;
        const dataFim = this.defaultForm.get('dataFimInput').value;
        const loja = this.defaultForm.get('lojaInput').value;

        this.consResLojaService
        .search(dataIni, dataFim, loja)
        .subscribe(results => {
                console.log("aqui");
                console.log(results);
            },err => {
                console.log("aqui1");
                console.log(err);
            }
        );

    }
}

Interceptor implementado para adicionar o Token de autorização:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpHandler, HttpHeaderResponse, HttpResponse, HttpRequest, HttpSentEvent, HttpProgressEvent, HttpUserEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { TokenService } from '../token/token.service';
@Injectable()
export class RequestInterceptor implements HttpInterceptor {

    constructor(private tokenService: TokenService) {}
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpSentEvent 
    | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> {
        if(this.tokenService.hasToken()) {
            const token = this.tokenService.getToken();
            req = req.clone({
                setHeaders:{
                    'AUTHORIZATION': 'bearer ' + token
                }
            });
        }
        console.log(req);
        return next.handle(req);
    }
}
4 respostas

Fala aí Giancarlo, tudo bem? Aparentemente olhando o código parece estar certo, para tentar entender e visualizar o problema com mais calma, precisaria do projeto.

Em vez de utilizar esse programa, tente verificar os dados da requisição pelo próprio Chrome, isso pode ser feito na aba "Network" (no caso de inglês).

Espero ter ajudado.

Olá Matheus, tudo bem. Segue link do GitHub para o projeto: https://github.com/geckel123/portalloja

Verifiquei os dados da requisição pelo próprio Chrome conforme você orientou na aba "Network" e estão da mesma forma como se não houvesse um body e os headers que eu passei não estavam setados.

solução!

Consegui resolver o problema. O problema estava no lado da API e não no lado do Front End. De qualquer forma obrigado pela atenção.

Desculpa a demora Giancarlo, não tive tempo de ver o projeto.

Fico feliz que tenha conseguido resolver.

Abraços e bons estudos.