3

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';

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

    console.log(req.url);

    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 didn't 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.

HDJEMAI
  • 9,436
  • 46
  • 67
  • 93
Mukund S
  • 31
  • 2
  • 9
  • Why do you need to replace HTTPs with HTTP, some resources cannot connect? – Chunbin Li Apr 28 '19 at 03:32
  • I think you need to install certificates from Facebook, download the certificates, keep it locally and modify your angular.json, maybe look at [**this**](https://stackoverflow.com/a/44055209/3937794) and also [**this**](https://medium.com/@richardr39/using-angular-cli-to-serve-over-https-locally-70dab07417c8) on how to do that, might be helpful ! – Sourav Dutta Apr 28 '19 at 04:02
  • @ChunbinLi I am not replacing HTTPs with HTTP. I am replacing HTTP with HTTPs. Because facebook says my request has to be HTTPs. – Mukund S Apr 29 '19 at 15:34
  • @SouravDutta I am able to run HTTPs with ssl as true and providing certificates. But at that time, HTTP is not working. I want to run with both HTTP and HTTPs. In HTTP case, it has to convert it to HTTPs. That's why I am using interceptor. – Mukund S Apr 29 '19 at 15:37
  • [**Check this post**](https://stackoverflow.com/questions/49201058/run-angular-2-app-over-http-and-https-both) – Sourav Dutta Apr 29 '19 at 15:51
  • Sorry, It's my mistake. Are you using the machine for testing? If you are deploying to the prod environment, It's recommended that both frontend and backend use https to connect – Chunbin Li Apr 29 '19 at 15:59
  • The proxy setting for your local environment { "/yourapi": { "target": "http://localhost:4200", "secure": false } } – Chunbin Li Apr 29 '19 at 16:03

0 Answers0