CODEWITHSUNDEEP
javascriptangularjsgoogle-apigoogle-picker
codeomnitrix
codeomnitrix

Reputation: 4249

Google drive picker error

I am getting following error while accessing google drive picker, however the picker shows up properly without any error.

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 the screenshot from my developer console

http://screencloud.net/v/6431

Also I have referred to this question Google Drive Picker - Developer Key is Invalid Error but I think there has been some changes in google api so this thing is not working.

Code snippet - 

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

Thanks

Upvotes: 13

Views: 3766

Answers (1)

silverelizard
silverelizard

Reputation: 109

As some of the commentators have mentioned, the X-Frame-Option error is known bug in Chrome. You can see a long discussion about it here.

Now, for the real problem: origin matching. Google Drive does not play nice with localhost, with or without port, regardless of whether you add it to your origins in your permissions for your client id.

There is, however, hope. If you set up a domain in your hostfile to point to localhost, you can then add the domain to your origin in your Google App console, and everything works as expected!

I do this all the time in order to test my applications. For example:

  1. add dev.mysite.com to your hostfile (/etc/hosts in Mac).
  2. Replicate the domain in your permissions for your picker app in the Google App Console, and you should be good to go.
  3. Start your site using dev.mysite.com:80* and Drive Picker should now function correctly.

*Note: you must serve on port 80. Google does not play nice with ports at all, so when you go to your site, the address must be dev.mysite.com with no port.

Upvotes: 9

Related Questions