Clash Royale CLAN TAG

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

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

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.