Custom header angular 4, error does not authenticate

Question

Good morning, I need to connect in a service that requires authentication passing some headers, more of all the ways I tried, does not send my custom Header, follows below the code:

public listarCategorias(): Observable<category[]> {

    return this.http.get<category[]>('https://xxxxx/categories')
        .pipe(
        tap(heroes => { this.log(`listarCategorias`) }),
        catchError(this.handleError('listarCategorias', []))
        );
}

I made an Interceptor

 intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    const headers = {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'x-accountmanager-key': 'xxxx',
        'x-api-key': 'xxxx',
        'x-user-email': 'xxxx',

    }

    const clone = req.clone({
        setHeaders: headers
    });

    return next.handle(clone);
}

I tested it on various applications like ARC, and authenticates it normally.

the header I captured in the browser was as follows:

:method:OPTIONS :path:/Categories :Scheme:https Accept:/ Accept-encoding:gzip, deflate, br Accept-language:en,en;q=0.9,en-US;q=0.8,en;q=0.7 access-control-request-headers:content-type,x-accountmanager-key,x-api-key,x-user-email access-control-request-method:GET origin:http://localhost:4200 user-agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) Applewebkit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36

Arnaldo R. Portela, I changed your example, and it was not, when executed in ARC, go

Answer 1

I recreated your example in plnkr and it worked, check on the link if my implementation is different from yours:

Example link

Just remember that since you are using Httpinterceptor, you should use the "Httpclient" class that is in "@angular/common/http" to perform the requests and not the "Http" class that is in "@angular/http".

Edited: it sends two requests, one OPTIONS and then one GET, in the example I put, the headers are being changed and the return is OK. Of course I’m not putting a bearer and I’m not doing any authentication, but the header information is there.

Answer 2

Something similar happened in my project, but then I realized it was the version of my dependencies, inside the root folder of your project runs

ng --version 

And put the appears.