Angular 6 Http Interceptor only works on request with same port api request

Question

I am working on a SPA project with client side hosted separately with backend side. My angular project(client-side) is hosted on localhost:4200 and my web api (backend-side) is hosted on localhost:58395. I would like to create a logging/auth Interceptor through Angular 6 so I followed online tutorial and carefully tried in my own project. However, my logging interceptor or auth interceptor only will log the request with HttpClient.Get with api url in localhost:4200, although my web api request returned successfully but it's not being captured through my logging interceptor...I am wondering if this is how interceptor works or if there is anything I did wrong on my side, if I cannot capture request to remote api I won't be able to log or attach my token...

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpResponse } from '@angular/common/http';
import { finalize, tap } from 'rxjs/operators';

@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler) {
        const startTime = Date.now();
        let status: string;

        return next.handle(req).pipe(
            tap(
                event => {
                    status = '';
                    if (event instanceof HttpResponse) {
                        status = 'succeeded';
                    }
                },
                error => status = 'failed'
            ),
            finalize(() => {
                const elapsedTime = Date.now() - startTime;
                const message = req.method + ' ' + req.urlWithParams + ' ' + status
                    + ' in ' + elapsedTime + 'ms';

                this.logDetails(message);
            })
        );
    }
    private logDetails(msg: string) {
        console.log('LogginInterceptor: ', msg);
    }
}

in my module providers I have:

{ provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true }

I only have local request captured by my logging interceptor:

this.httpClient.get('http://localhost:4200/assets/api/langs/us.json)

LogginInterceptor:  GET http://localhost:4200/assets/api/langs/us.json succeeded in 10ms

My remote request through

loadIOptionMembersRelationship(): Observable<IOptionResponse> {
        return this.httpClient.get<IOptionResponse>(`http://localhost:58395/api/member/IOptionMemberRelationship`);
}

did not get captured in logging interceptor somehow...

The interceptor should be working fine because it captured one of my request through localhost:4200 while the other one through localhost:58395 did not get captured, same result for adding the header... — Drex, Jul 27 '18 at 13:29

score 1 · Accepted Answer · answered Jul 27 '18 at 05:57

1

I guess you need a proxy configuration. Here it is the documentation for angular-cli

https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

answered Jul 27 '18 at 05:57

Antonio

644
5
17

Thank you! The proxy configuration seems will redirect all request from one server to another server, (Say we have a server running on http://localhost:3000/api and we want all calls to http://localhost:4200/api to go to that server.), but part of my request will go to server A, part of my request will go to server B or C...I am not sure if it will work by doing that configuration which only single server will be redirected. And I didn't see other people or tutorial had that configuration while it worked properly.. – Drex Jul 27 '18 at 13:33

Angular 6 Http Interceptor only works on request with same port api request

1 Answers1