google-oauth - Google Picker 拒绝加载错误 "Failed to execute ' postMessage' on 'DOMWindow' : The target origin provided"

Question

我正在尝试加载 Google Picker。

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

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

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

此时 iframe 加载失败，我收到错误

无法在“DOMWindow”上执行“postMessage”:提供的目标来源 (“https://docs.google.com”) 与收件人窗口的来源不匹配

我已经搜索过这个问题，许多解决方案都说确保将您的域添加到谷歌控制台中的授权 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';
}