gapi.client.init 失败：不是客户端的有效来源：http://localhost:4200 尚未被列入客户端 ID 白名单答案

【问题标题】：gapi.client.init failed: Not a valid origin for the client: http://localhost:4200 has not been whitelisted for client IDgapi.client.init 失败：不是客户端的有效来源：http://localhost:4200 尚未被列入客户端 ID 白名单
【发布时间】：2021-06-05 01:08:15
【问题描述】：

我正在尝试从我的 Angular 应用程序调用 Gmail API，但由于某种原因我收到此错误：

我在开发控制台中使用我的项目设置已经很长时间了。

我正在按照 Gmail API 文档中的定义拨打电话，https://developers.google.com/gmail/api/quickstart/js 针对 Angular 进行了调整：

import { Component, OnInit } from '@angular/core';
import { AppService } from './app.service';

const API_KEY = '**************v4bXc58f61rA';
const CLIENT_ID = '***************dnioepu4c06kqk3ke72n.apps.googleusercontent.com';
const DISCOVERY_DOCS = ['https://www.googleapis.com/discovery/v1/apis/gmail/v1/rest', 'https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest'];
const SCOPES = 'https://www.googleapis.com/auth/gmail.readonly https://www.googleapis.com/auth/calendar.readonly';

declare var gapi: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'my-app';

  constructor(private service: AppService) {
    console.log('AppComponent.constructor()');
  }

  ngOnInit(): void {
    gapi.load('client:auth2', this.initClient);
  }

  initClient() {
    gapi.client.init({
      apiKey: API_KEY,
      clientId: CLIENT_ID,
      discoveryDocs: DISCOVERY_DOCS,
      scope: SCOPES
    }).then(() => { 
      console.log('gapi.client.init successful');
    }, (error) => {
      console.error('gapi.client.init failed: ', error.details);
    });
  }

}

gapi.client.init()函数中列出的所有必需参数都在我的项目中定义。

http://localhost:4200 添加到授权的 JavaScript 来源和授权的重定向 URI

我什至按照其他线程中的建议添加了 Google Analytics API（不知道为什么）。

所以网址被列入白名单，不知道为什么我仍然收到错误。

【问题讨论】：

标签： angular typescript google-api

【解决方案1】：

天哪，这是一些缓存问题 :)

一切都做对了。

无需添加“Google Analytics API”。

只清除缓存，使用“隐身”模式没有帮助，因为不支持 cookie。

【讨论】：