Troubleshooting Google Drive Picker Issues

Other Questions Google drive
1

I’m running into a problem with the Google Drive Picker. It’s showing up fine but I’m getting some weird errors in the console. Here’s what I’m seeing:

Error: Can't send message to https://docs.google.com from http://localhost
X-Frame-Options header problem: ALLOW-FROM http://localhost not recognized

I tried looking at some older posts about similar issues but they seem outdated. Has anyone run into this recently? Here’s a simplified version of my code:

let picker = new GooglePicker()
  .setLanguage('en')
  .setAuthToken(myToken)
  .onSelect(handleSelection)
  .setSource('myapp');

Any ideas on how to fix these errors? The picker works but I’m worried these messages might cause problems later. Thanks for any help!

2

yo, i had the same issue. turns out it was a CORS thing. try adding this to ur server:

res.setHeader('Access-Control-Allow-Origin', '*');

fixed it for me. also, make sure ur using https locally. that helped too. good luck!

3

The errors you are encountering appear to be related to cross-origin communication restrictions and content security policies when using the Google Drive Picker locally. In my experience, ensuring that your development environment uses HTTPS rather than HTTP is a crucial first step, as localhost configurations can sometimes conflict with security settings. You should also verify that your Google Cloud Console settings correctly include your development domain as an allowed origin. Lastly, if you are developing within frameworks like React or Angular, double-check that iframe communication is not inadvertently blocked.

These adjustments have helped me overcome similar issues in the past, and they might resolve your situation.

4

I’ve faced similar issues with the Google Drive Picker, and it can be frustrating. In my case, the problem was related to how I was handling the origin in my Google Cloud Console settings. Make sure you’ve added ‘http://localhost’ to the authorized JavaScript origins in your project’s credentials. This solved the X-Frame-Options issue for me.

For the messaging error, I found that wrapping my picker initialization in a try-catch block helped identify any underlying issues:

try {
  let picker = new GooglePicker()
    .setLanguage('en')
    .setAuthToken(myToken)
    .onSelect(handleSelection)
    .setSource('myapp');
} catch (error) {
  console.error('Picker initialization error:', error);
}

This approach helped me pinpoint the exact cause of the problem. In my case, it turned out to be an issue with the auth token. Double-check that your token is valid and has the necessary scopes for Drive access.

Hope this helps! Let me know if you need any more details on how I resolved it.