Calling HTTPS API from Angular deployed in http server

Question

I am calling HTTPS API from Angular service deployed in http server by the following code.

this.chatbotUrl = "https://something.com/api"; 
getDashBoardData(): Observable<any> {
    return this.http.get<IContainer>(this.chatbotUrl+"/chatbot/get-dashboard-data").pipe(
      map((response) => (response ? response : {})),
      catchError( this.handleError )
    );
  }

But when I am calling this API, then I am getting this error, "Http failure response for https://something.com/api/chatbot/get-dashboard-data: 0 Unknown Error". The following error is also get.

GET https://something.com/api/chatbot/get-time-wise-traffic/7 net::ERR_CERT_COMMON_NAME_INVALID

How can I call https API from Angular service deployed in http server?

If you check response status (like 422, 400) it would be help for answer. I think the problem was related to CORS. — Hyunjune Kim
– Hyunjune Kim, Commented Jan 20, 2022 at 5:08
This API "something.com/api/chatbot/get-time-wise-traffic/7" is external. So I think there is no problem related to CORS , I think — Sultan Ahmed
– Sultan Ahmed, Commented Jan 20, 2022 at 5:49
The error suggests that the server you're trying to reach is incorrectly configured. This is a TLS related error. — Evert
– Evert, Commented Jan 20, 2022 at 9:32

pooja · Accepted Answer · 2022-01-20 15:09:48Z

I suppose you have not configured the API properly,check whether the site requires any key to get accessed.Here I have provided the component.ts file and service file for the API I am working with for your reference. If CORS error try adding CORS extension to your browser;else clear your cache and run your code again.

Component.ts:

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { YoutubeService } from '../youtube.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  Name:any;
  details: any;
  info:any;
  display!:boolean;

  constructor(private service:YoutubeService,public sanitizer: DomSanitizer) { }
  
  ngOnInit(): void {
    this.service.GetVideos().subscribe((res:any)=> {
      this.info= res as any
      this.info=this.info.items;
      console.log(this.info);
      this.display=true
    });
   
  }
  onSubmit() {
    this.service.GetSearch(this.Name).subscribe(res=> {
        this.details= res as any
        this.details=this.details.items;
        // this.details.forEach((function.this.details.i) => {
        //    ele
        // });
        console.log(this.details);
        this.display=true
      });
      
  }

}

Service:

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { GoogleLoginProvider } from 'angularx-social-login';

@Injectable({
  providedIn: 'root'
})
export class YoutubeService {
  private APIURL = "https://youtube.googleapis.com/youtube/v3/";
  private APIKEY ="AIzaSyB40HaKwd0VggftBq8R9sEwQx_NG5xOOWc";

  constructor(private http:HttpClient) { }
  public GetSearch(name:string)
  {
    console.log(name)
    return this.http.get(this.APIURL+"search?part=snippet&key="+this.APIKEY+"&q="+name+"&type=video");
  }

Collectives™ on Stack Overflow

Calling HTTPS API from Angular deployed in http server

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related