I am creating an angular 7 application. In this application I am using facebook social login. When using this, I got console error saying my request should be https:// requests. So I thought of using interceptor to convert http to https.

I created an interceptor to change my http request to https request and made the following code changes.

http.interceptor.ts :

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent,HttpResponse }  from '@angular/common/http';
import { Observable } from 'rxjs';

export class httpsInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {


const secureReq = req.clone({
  url: req.url.replace('http://', 'https://')
return next.handle(secureReq);


app.module.ts :

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { httpsInterceptor } from './interceptor/https.interceptor';

providers: [
 { provide: HTTP_INTERCEPTORS, useClass: httpsInterceptor, multi: true }   

After making the above changes, when I run my application as "ng serve", I can access the application through http://localhost:4200, but it is not directing to "https://localhost:4200" and also I didnt see the console log from interceptor class.

And when I run my application as "ng serve --ssl true", I am able to access the application through https://localhost:4200 but nothing shows up when I type http://localhost:4200.

Expected output :

When I run "ng serve" and open http://localhost:4200, it has to redirect to https://localhost:4200

When I run "ng serve --ssl true", I should be able to access the app through http://localhost:4200 also.

Kindly let me know what am I doing wrong or do I need to make few more code changes ? Thanks.

0 Answers