Angular调用外部API出现未知请求错误，寻求解决方案

我浏览过一些相关问题，但仍未解决疑惑。我尝试在Angular中调用外部API，但始终出现错误。抱歉我的英文不太好。

错误截图 #

组件代码 #

consultaSku(sku: string) {
    if (sku != null && sku !== '') {
        this.pedidosService.consultaSku(sku)
            .subscribe(dados => console.log(dados)
            );
    }
}

服务代码 #

consultaSku(sku: string) {
    // console.log(sku);
    if (sku !== '') {
        return this.http.get(`//bling.com.br/Api/v2/produto/${sku}/json/?apikey=${apikey}`);
    }
    return of({});
}

我希望实现输入框中输入值时立即发起查询，恳请各位帮忙解决这个问题。

解决建议 #

• 跨域问题处理：从错误截图判断大概率是CORS跨域限制，两种解决方式：

  1. 后端配置：联系API提供方在服务器添加允许你域名的CORS响应头
  2. Angular代理：在项目根目录创建proxy.conf.json：

     {
       "/Api": {
         "target": "https://bling.com.br",
         "secure": true,
         "changeOrigin": true
       }
     }
     

     修改angular.json中serve配置，添加"proxyConfig": "proxy.conf.json"，重启项目即可通过代理转发请求规避跨域

• URL协议修正：当前请求用//bling.com.br会继承页面协议，确保页面使用HTTPS，避免混合内容报错

• 即时查询优化：要实现输入时立即查询，需避免频繁请求，组件代码可优化为：

  import { Subject } from 'rxjs';
  import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
  
  // 组件内定义
  private skuInput$ = new Subject<string>();
  
  ngOnInit(): void {
    this.skuInput$.pipe(
      debounceTime(300), // 输入停止300ms后发起请求
      distinctUntilChanged() // 输入值未变化时不重复请求
    ).subscribe(sku => {
      this.consultaSku(sku);
    });
  }
  
  // 输入框input事件绑定此方法
  onSkuInput(sku: string): void {
    this.skuInput$.next(sku);
  }
  

内容的提问来源于stack exchange，提问作者jt_sobrinho