How do I get http content from a https website?

Question

I get "Http failure response for https://www.google.com: 0 Unknown Error" when I request from Secured url.

I am trying to test my ionic/angular mobile app. When I tried with http requests I had problem with Android 9, but with Android 7 was working fine. Anyhow I need to set my backend to public https server. So now I'm testing with https request and none of 7 and 9 Android versions works.

I am using Angular 7 ,

"@ionic/angular": "^4.6.1",
"@ionic-native/core": "^5.0.0",
"rxjs": "~6.5.1"

I made these small functions in order to make my problem simpler.

inside my html file i have this code:

myFile.html

  <ion-button
          (click)="onStartTest()"
  >Click me</ion-button>
  <p id="testme"></p>

myFile.page.ts

  onStartTest() {
    this.taskService.onTest().subscribe(result => {
      document.getElementById('testme').innerText = 'result ' + result;
      console.log(result);

    }, error => {
      document.getElementById('testme').innerText = error.message;
      console.log('Problem ', error.message);
    });
  }

myTask.service.ts

  onTest() {
    return this.http.get('https://www.google.com').pipe(
      catchError(err => {
        return throwError(err);
      })
    );
  }

At first I tried my server's URL but I changed it to "https://www.google.com" just to verify that the backend is correct.

Also I have an interceptors.ts file that I am using it for authentication, but I am not logged in when I execute the onStartTest() function, but im gonna share it anw.

interceptors.ts

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

@Injectable()
export class TokenInterceptor implements HttpInterceptor {


  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = localStorage.getItem('auth_token');
    let newHeaders = req.headers;

    if (token) {
      console.log(token);
      newHeaders = newHeaders.set('Authorization', 'Token ' + token);
      const modified = req.clone({
        headers: newHeaders
      });
      return next.handle(modified);
    } else {
      newHeaders = newHeaders.set('Content-Type', 'application/json');
      const modified = req.clone({
        headers: newHeaders
      });
      return next.handle(modified);
    }
  }
}

I think these are the necessary files to share for this problem. I also tested the url of google with Postman just to be sure that I should get a status 200

I am also aware that there is an "add_header" directive (nginx) that adds 'Allow-access-control-origin' when the response code is 20x or 30x. According to my screenshot with Postman, google is responding with 200 status, but my app still gets status 0 error.

Ignore the first Error. It's a function I use with http when the app begins. Right now im testing https.

I tried superficially to use ionic-native library HTTP but my app totally crashed.

I also execute the command ionic serve --ssl but still nothing.

I read somewhere that for secured connection I need a certificate, but I understood that this is a server's work.

I tried to request from Dark Sky from Vanilla JavaScript and it works fine. So there is something wrong with angular/ionic side and not server's.

What am I missing? I really need to fix this problem soon! I want to send a secured request to an https url and get the appropriate response.

Answer 1

Your main problem is that you are trying make an API to an unsecure call (http) location (http://192....../mobile/tasks) from a secure origin (https://localhost:8100).

This is clearly indicated in your error message and this is not allowed, and has been answered before

Your second problem is that, for testing purposes, you are trying to call a 3rd party https ressource from your website. This only works if the 3rd party ressource implement CORS, which is not the case for Google and api.darksky.net. Sending a GET request with Postman is useless, as Postman will not check for CORS headers before displaying the response. If you want to use Postman to check CORS, send an OPTIONS request to these ressources and you'll see that there are no CORS headers