Google Picker refuse de charger avec l'erreur "Impossible d'exécuter 'postMessage' sur 'DOMWindow': L'origine cible fournie"

Question

Je suis en train de charger Google Picker.

J'utilise ce paquet NPM https://www.npmjs.com/package/google-picker

Lors du chargement du sélecteur, les fenêtres auth apparaissent, et je peux sélectionner mon compte Google.

Une fois l'authentification terminée, il tente d'ouvrir l'iframe Google Picker.

Il est à ce point l'iframe ne se charge pas et je reçois l'erreur

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

J'ai cherché cette question et de nombreuses solutions disent assurez-vous d'ajouter votre domaine aux origines JS autorisés dans Google console

Je l'ai fait! Le domaine est définitivement dans les domaines autorisés pour le client. La connexion Google fonctionne avec mon application .. mais je n'arrive pas à faire fonctionner le sélecteur.

J'ai essayé les deux en cours d'exécution de localhost et le téléchargement sur le serveur. Mais j'ai la même erreur.

Le serveur que j'utilise est HTTPS. Et l'URL iframe du sélecteur est également HTTPS. Donc, cela ne devrait pas être un problème.

Que puis-je essayer d'autre? Je n'ai plus d'options. Je suis l'API exactement. J'ai mis toutes les bonnes clés.

Answer 1

La raison pour laquelle Google Picker ne montrait pas était en fait sans rapport avec l'erreur de la console.

Même si l'erreur de console est apparue, le sélecteur fonctionne toujours.

Mais je pensais que cela ne fonctionnait pas parce que j'utilisais la bibliothèque de pickadate qui avait des CSS qui sont en conflit avec Google Picker.

En savoir plus sur cette question ici: https://github.com/amsul/pickadate.js/issues/619

Answer 2

De ce SO post answer, il est indiqué que le problème est avec l'origine de la cible qui est https.

Je crois qu'il s'agit d'un problème avec l'origine cible https. Je suppose que c'est parce que votre URL iFrame utilise http au lieu de https. Essayez de changer l'URL du fichier que vous essayez d'intégrer à être https.

Par exemple:

var id = getId(url); 
    return '//www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000'; 
} 

être:

var id = getId(url); 
    return 'https://www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000'; 
}