[SOLVED] The target origin provided ('https://docs.google.com') does not match the recipient window's origin ('http://localhost:3000')

The target origin provided ('https://docs.google.com') does not match the recipient window's origin ('http://localhost:3000')

Hi I am trying to access google drive from my react application, When I am signing in an iframe appears and and shows 'The developer key is invalid'. I am using a google drive library react-google-picker.

I am getting a message like this Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://docs.google.com') does not match the recipient window's origin ('http://localhost:3000') in the browser console .

I cannot understand why does it says The target origin provided ('https://docs.google.com'), I entered http://localhost:3000 in the google developers console as Javascript origin url. Is it an issue of the iframe ?

Solution

I came across this question while having the same issue, all be it I was using the example straight out of the docs!

I found that I had missed enabling the Picker API https://console.cloud.google.com/apis/library/picker.googleapis.com