谷歌云存储选择器错误

Question

谷歌云存储选择器错误

javascriptangularjsgoogle-apigoogle-picker

13

当我尝试访问Google Drive选择器时，出现以下错误，但选择器正常显示且没有任何错误。

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

Invalid 'X-Frame-Options' header encountered when loading 'https://docs.google.com/picker?protocol=gadgets&origin=http%3A%2F%2Flocalho…%3Atrue%7D))&rpctoken=e2x1eop3h1rr&rpcService=2qeo0ns6gu13&thirdParty=true': 'ALLOW-FROM http://localhost' is not a recognized directive. The header will be ignored.

这是我从开发者控制台截取的PSB屏幕截图：

http://screencloud.net/v/6431

此外，我参考了这个问题：Google Drive Picker - Developer Key is Invalid Error 但我认为 Google API 已经有所改变，所以这个方法不起作用。

代码片段：

var picker = new google.picker.PickerBuilder()
                             .setLocale(lkGoogleSettings.locale)
                             .setOAuthToken(accessToken)
                             .setCallback(pickerResponse)
                             .setOrigin(lkGoogleSettings.origin);

谢谢

- codeomnitrix

“http://localhost” 不是一个被识别的指令。也许 Google API 需要端口号，例如 “http://localhost:80”？ - guysigner

3

这只发生在Chrome浏览器中。第二个问题被报告为一个他们不打算修复的漏洞。 https://code.google.com/p/chromium/issues/detail?id=511521 - Amber

我认为谷歌文件选择器只能在实时服务器上运行，您需要将其托管。 - Paresh Gami

它在Paresh的电脑上工作，只有在Chrome浏览器中出现错误。 - codeomnitrix

你找到解决方案了吗？我在我的ionic应用的Android构建中遇到了同样的问题。 - Brad W

不好意思，这是他们API中已经存在的一个bug...目前还没有解决方案。 - codeomnitrix

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- silverelizard · Accepted Answer

如一些评论员所提到的，X-Frame-Option错误是Chrome中已知的一个漏洞。你可以在这里看到关于它的长时间讨论。

现在，真正的问题是匹配来源。无论你是否将localhost添加到你客户端ID的权限中，Google Drive都不与之兼容，包括端口。

但是，仍然有希望。如果你在hostfile中设置一个域名指向localhost，然后将该域名添加到Google应用程序控制台中的源中，一切都会按预期工作！

我经常这样做以测试我的应用程序。例如：

1. 在你的hostfile（在Mac中为/etc/hosts）中添加dev.mysite.com。 2. 在Google App Console中的picker app权限中复制该域，并检查是否设置正确。 3. 使用dev.mysite.com:80*启动你的站点，Drive Picker现在应该正常工作了。

*注意：你必须使用端口80进行服务。Google不允许使用端口，因此当你访问你的站点时，地址必须是没有端口的dev.mysite.com。