Google Picker API + Angular2无法在'DOMWindow'上执行'postMessage'

Question

我希望将Google Picker API集成到我的Angular 2应用程序中。

我的HTML代码：

import { Component } from '@angular/core';
declare var gapi:any;
declare var google:any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'app works!';
  developerKey = 'AIzaSyDFf3LoI2iGoq21Py5mx0YdRZC4-wOu2jQ';
  clientId = "487432935414-ekonc03orunp50312oqmlrauutorpb53.apps.googleusercontent.com"
  scope = ['https://www.googleapis.com/auth/drive.readonly'];
  pickerApiLoaded = false;
  oauthToken?: any;

  constructor() { }

  onApiLoad() {
    gapi.load('auth', {'callback': this.onAuthApiLoad.bind(this)});
    gapi.load('picker', {'callback': this.onPickerApiLoad.bind(this)});
  }

  onAuthApiLoad() {
    gapi.auth.authorize(
        {
          'client_id': this.clientId,
          'scope': this.scope,
          'immediate': false
        },
        this.handleAuthResult);
  }

  onPickerApiLoad() {
    this.pickerApiLoaded = true;
    this.createPicker();
  }

  handleAuthResult(authResult) {
    if (authResult && !authResult.error) {
      if (authResult.access_token) {
        var pickerBuilder = new google.picker.PickerBuilder();
        var picker = pickerBuilder.
            enableFeature(google.picker.Feature.NAV_HIDDEN).
            setOAuthToken(authResult.access_token).
            addView(google.picker.ViewId.PHOTOS).
            setDeveloperKey('AIzaSyDFf3LoI2iGoq21Py5mx0YdRZC4-wOu2jQ').
            setCallback(function (e){
              var url = 'nothing';
              console.log(url);
              if (e[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
                var doc = e[google.picker.Response.DOCUMENTS][0];
                url = doc[google.picker.Document.URL];
              }
              var message = 'You picked: ' + url;
              console.log(message);
            }).
            build();
        picker.setVisible(true);
      }
    }
  }

  createPicker() {
    if (this.pickerApiLoaded && this.oauthToken) {
      var picker = new google.picker.PickerBuilder().
          addView(google.picker.ViewId.DOCUMENTS).
          setOAuthToken(this.oauthToken).
          setDeveloperKey(this.developerKey).
          setCallback(this.pickerCallback).
          build();
      picker.setVisible(true);
    }
  }

  pickerCallback(data) {

    var url = 'nothing';
    console.log(url);
    if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
      var doc = data[google.picker.Response.DOCUMENTS][0];
      url = doc[google.picker.Document.URL];
    }
    var message = 'You picked: ' + url;
    alert(message);
  }

我的组件打字稿代码：

{{1}}

我可以登录谷歌并获取访问令牌，但之后我无法在Google云端硬盘中看到文档。

而不是我得到以下错误：

1. cb = gapi.loaded_0：96无法在'DOMWindow'上执行'postMessage'：提供的目标来源（'https://docs.google.com'）与收件人窗口的来源（'https://localhost:4200'）不匹配
2. 加载“https://docs.google.com/picker?protocol=gadgets&origin=https%3A%2F%2Flocalhost%3A4200&navHidden=true&oauth_token=ya29.GlskBRj74kFwZFmKi3ecOvMG9yGYjoTnaaxpf84M_qSOwANu_m3uSvzciXupB35CXxHvfHgNQuS_pfVG9lwRnrKA4JQiU5mTX3hNEWxBQ69cJTMyTnn0LzsQJOgB&developerKey=AIzaSyDFf3LoI2iGoq21Py5mx0YdRZC4-wOu2jQ&hostId=localhost&relayUrl=https%3A%2F%2Flocalhost%3A4200%2Ffavicon.ico&nav=((%22photos%22))&rpctoken=vcwxj7g2b339&rpcService=sz95b67m0h97&thirdParty=true”时遇到无效的“X-Frame-Options”标题：“ALLOW-FROM https://localhost:4200”不是公认的指令。标题将被忽略。

输出：