Google 选择器拒绝加载错误 "Failed to execute 'postMessage' on 'DOMWindow': The target origin provided"

Question

我正在尝试加载 Google 选择器。

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

加载选择器时，出现 windows 身份验证，我可以 select 我的 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

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

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

我已经尝试从本地主机运行和上传到服务器。但是我得到了同样的错误。

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

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

Answer 1

据此 SO post answer，指出问题出在目标原点 https。

I believe this is an issue with the target origin being https. I suspect it is because your iFrame url is using http instead of https. Try changing the url of the file you are trying to embed to be https.

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

Answer 2

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

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

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

有关该问题的更多信息，请点击此处：https://github.com/amsul/pickadate.js/issues/619

Google 选择器拒绝加载错误 "Failed to execute 'postMessage' on 'DOMWindow': The target origin provided"

Google Picker refuses to load with error "Failed to execute 'postMessage' on 'DOMWindow': The target origin provided"

google-authentication

google-oauth

google-picker