Google Picker 拒绝加载错误“无法在 'DOMWindow' 上执行 'postMessage'：提供的目标来源”

Question

我正在尝试加载 Google Picker。

我正在使用这个 npm 包https://www.npmjs.com/package/google-picker

加载选择器时，会显示身份验证窗口，我可以选择我的 Google 帐户。

身份验证完成后，它会尝试打开 Google Picker iframe。

此时 iframe 无法加载，我收到错误消息

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://docs.google.com') does not match the recipient window's origin

我已经搜索过这个问题，许多解决方案都说确保将您的域添加到谷歌控制台中的授权 JS 源

我已经做到了！该域肯定在客户端的授权域中。 Google 登录适用于我的应用程序。但我似乎无法让 Picker 工作。

我尝试过从 localhost 运行和上传到服务器。但我得到了同样的错误。

我使用的服务器是 HTTPS。选择器的 iframe URL 也是 HTTPS。所以这应该不是问题。

我还能尝试什么？我没有选择。我完全遵循 API。我已经输入了所有正确的键。

Answer 1

Google Picker 未显示的原因实际上与控制台错误无关。

即使出现控制台错误，选择器仍然有效。

但我认为它不起作用，因为我使用的 pickadate 库的 css 与 Google Picker 冲突。

在此处了解有关该问题的更多信息：https://github.com/amsul/pickadate.js/issues/619

Answer 2

据此SO post answer 引用，问题在于目标原点https。

我认为这是目标来源为https 的问题。一世 怀疑这是因为您的 iFrame 网址使用的是 http 而不是 https。尝试更改您尝试嵌入的文件的 url 是https。

例如：

var id = getId(url);
  return '//www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000';
}

成为：

var id = getId(url);
  return 'https://www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000';
}