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...

Answer 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