从部署在http服务器中的Angular调用HTTPS API

Question

我通过以下代码从部署在http服务器中的Angular服务调用HTTPS API。

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 )
);
}

但是当我调用这个API时，我得到了这个错误；的Http失败响应https://something.com/api/chatbot/get-dashboard-data:0未知错误"；。以下错误也是get。

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

如何从部署在http服务器中的Angular服务调用https API？

Answer 1

我想您没有正确配置API，请检查站点是否需要任何密钥才能访问。在这里，我为正在使用的API提供了component.ts文件和服务文件，供您参考。如果CORS错误，请尝试在浏览器中添加CORS扩展；否则，请清除缓存并再次运行代码。

组件.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
});

}
}

服务：

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");
}