Google drive file picker: dialog won't close when "select" is hit

Question

I know this has been asked many times, I have browsed countless threads about this problem but no solution seems to apply to my case. Using google drive file picker, during the picking process I consistently get this error in the console:

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

Despite the error, the picker works fine the first time, but if I open it a second time, choosing a file and clicking the "select" button won't close the dialog. After the picked file is returned to the callback, to close the dialog the user will have to hit the "cancel" or the "x" button in the upper right. I am not sure if the console error and the picker dialog problem are related.

I have read all these:

• The target origin provided ('https://docs.google.com') does not match the recipient window's origin ('http://localhost:3000')
• Google API error, but still works
• Failed to execute 'postMessage' on 'DOMWindow' using Google code
• Failed to execute 'postMessage' on 'DOMWindow': https://www.youtube.com !== http://localhost:9000
• Google Picker refuses to load with error "Failed to execute 'postMessage' on 'DOMWindow': The target origin provided"

I'm google google drive file picker and google drive API, this is the source code, which is taken almost "as is" from the online example in the google drive picker docs:

 <script type="text/javascript" src="https://apis.google.com/js/api.js"></script>
 <script>
        // The Browser API key obtained from the Google API Console.
        // Replace with your own Browser API key, or your own key.
        var developerKey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx';

        // The Client ID obtained from the Google API Console. Replace with your own Client ID.
        var clientId = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

        // Replace with your own project number from console.developers.google.com.
        // See "Project number" under "IAM & Admin" > "Settings"
        var appId = "xxxxxxxxxxxxxxxx";

        // Scope to use to access user's Drive items.
        var scope = ['https://www.googleapis.com/auth/drive.file'];

        var pickerApiLoaded = false;
        var oauthToken;

        // Use the Google API Loader script to load the google.picker script.
        function loadPicker() {
            gapi.load('auth', { 'callback': onAuthApiLoad });
            gapi.load('picker', { 'callback': onPickerApiLoad });
        }

        function onAuthApiLoad() {
            window.gapi.auth.authorize(
                {
                    'client_id': clientId,
                    'scope': scope,
                    'immediate': false
                },
                handleAuthResult);
        }

        function onPickerApiLoad() {
            pickerApiLoaded = true;
            createPicker();
        }

        function handleAuthResult(authResult) {
            if (authResult && !authResult.error) {
                oauthToken = authResult.access_token;
                createPicker();
            }
        }

        // Create and render a Picker object for searching images.
        function createPicker() {
            if (pickerApiLoaded && oauthToken) {
                var view = new google.picker.View(google.picker.ViewId.DOCS);
                view.setMimeTypes("image/png,image/jpeg,image/jpg");
                var picker = new google.picker.PickerBuilder()
                    .enableFeature(google.picker.Feature.NAV_HIDDEN)
                    .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
                    .setAppId(appId)
                    .setOAuthToken(oauthToken)
                    .addView(view)
                    .addView(new google.picker.DocsUploadView())
                    .setDeveloperKey(developerKey)
                    .setCallback(pickerCallback)
                    .build();
                picker.setVisible(true);
            }
        }

        // A simple callback implementation.
        function pickerCallback(data) {
            if (data.action == google.picker.Action.PICKED) {
                var fileId = data.docs[0].id;
                alert('The user selected: ' + fileId);
            }
        }
  </script>
  <div>
        <button type="button" onclick="loadPicker()">Load google drive picker</button>
  </div>

• The authorized javascript origin and redirect uris are included in the google console, all the uris are under SSL.

• I have enabled the picker and google drive apis

• I have tried to comment out setDeveloperKey() and setAPPid() with no effetcs

• The scope is included in the developer console oauth consent screen section

• I am not getting the cors error or "Invalid x-frame-options header" which is common in many of the questions above

• I have tried to include the API key as a parameter when loading the API, like:

  src="https://apis.google.com/js/api.js?key=xxxxxxxxxxxxxxxxxxx"

• The origin is served by a local html server (IIS), and I have the same problem on my production server. both are under SSL.

• I have tried picker.setOrigin(window.location.protocol + '//' + window.location.host ) as suggested in the docs