Hey everyone,
I’m having a weird problem with the Google Drive Picker. It shows up fine, but I’m getting some 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’ve tried looking up solutions, but it seems like Google might have changed something in their API recently. My code looks like this:
let drivePickerBuilder = new GooglePickerCreator()
.setLanguage('en')
.setAuthKey(userToken)
.setResultHandler(handlePickerOutput)
.setStartPoint('http://localhost');
Has anyone else run into this? Any ideas on how to fix it? I’m a bit stuck and could use some help. Thanks!
hey lucasg, i’ve run into similar issues. have u tried using https instead of http for localhost? sometimes that helps with cors stuff. also, double-check ur API settings in google console - they mightve changed smthing recently. good luck!
I encountered a similar issue recently. The problem likely stems from Google’s security restrictions for localhost. A workaround that worked for me was using a tool like ngrok to create a secure tunnel to my localhost. This generates a public HTTPS URL that you can whitelist in your Google Console settings. Remember to update your OAuth credentials and redirect URIs accordingly. It’s a bit of extra setup, but it solved the X-Frame-Options and CORS errors for me when testing locally. Just ensure you don’t expose sensitive data through the public URL during development.
I’ve dealt with this Google Drive Picker issue before, and it can be frustrating. One thing that helped me was tweaking the Content Security Policy (CSP) headers. Try adding ‘https://docs.google.com’ to your script-src and frame-src directives.
Also, make sure you’ve properly set up your OAuth 2.0 client ID in the Google Cloud Console. Sometimes, the localhost restrictions can be finicky. I found that explicitly adding ‘http://localhost’ and ‘http://localhost:*’ (replace * with your port) to the Authorized JavaScript origins helped.
If all else fails, consider using a local HTTPS setup. It’s a bit more work, but it can bypass a lot of these security-related headaches when developing locally. Tools like mkcert can help you set up a trusted local HTTPS environment relatively painlessly.
Keep at it – these API quirks can be annoying, but there’s usually a way around them!