是否可以在 Angular 8 中调用 yahoo 联系人 API

Question

在 Angular 应用程序中，我需要请求 yahoo 联系人 API： 首先我想知道是否可以向客户请求？ 我在 Angular 中的代码是：

ngOnInit(): void {
      this.route.queryParams.subscribe(q => {

      const body = {
        client_id: this.yahooObj.clientId,
        client_secret: this.yahooObj.clientSecret,
        redirect_uri: this.yahooObj.redirect,
        code: q.code,
        grant_type: 'authorization_code'
      }
      this.http.post<any>('https://api.login.yahoo.com/oauth2/get_token',
        body, {headers: new HttpHeaders({
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
            'Authorization': 'Basic' + btoa(`${this.yahooObj.clientId}:${this.yahooObj.clientSecret}`)
          })})
        .subscribe(data => {
          console.log('return data service', data);
        }, (err: HttpErrorResponse) => {
          console.log('Error', err);
        });
  });
}

 yahooAuth() {
    window.open(`https://api.login.yahoo.com/oauth2/request_auth?client_id=${this.yahooObj.clientId}&response_type=code&redirect_uri=${this.yahooObj.redirect}`);
  }

并且从 yahoo 身份验证页面重定向和 beck 代码工作正常，但 http.post 请求返回到关于 CORS 策略的错误下方，因为在邮递员中工作正常。

从源“http://localhost:3201”访问“https://api.login.yahoo.com/oauth2/get_token”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：没有“访问控制允许源” ' 请求的资源上存在标头。

因为在邮递员中是好的并且在浏览器中有这个 CORS 策略错误，我需要确保有任何方法可以在客户端调用这个 API？

Answer 1

Basic 和令牌之间缺少一个空格。试试下面的

'Authorization': 'Basic ' + btoa(`${this.yahooObj.clientId}:${this.yahooObj.clientSecret}`)

注意单词Basic后面的空格。

关于CORS问题，您可以在前端设置一个代理来重定向请求。

Answer 2

您可以在后端服务器中编写 Yahoo API 调用并从 Angular 客户端调用 API，即所谓的代理。这可以解决 CORS 问题。