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