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

Posted 2023-02-24

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

【英文标题】：Google Picker refuses to load with error "Failed to execute 'postMessage' on 'DOMWindow': The target origin provided"Google Picker 拒绝加载错误“无法在 'DOMWindow' 上执行 'postMessage'：提供的目标来源”

【发布时间】：2018-03-05 05:19:18

【问题描述】：

我正在尝试加载 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。我已经输入了所有正确的键。

【问题讨论】：

您能否添加一段代码来展示您如何使用 Google 选择器库？尤其是给定的选项。

【参考方案1】：

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

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

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

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

【参考方案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';

【讨论】：

感谢您的回答，但它没有解决我的问题。 iframe URL 使用 HTTPS。而且我的网络服务器也使用 HTTPS。

这个运气好吗？我有点面临同样的问题。