Google Picker verweigert das Laden mit dem Fehler "Fehler beim Ausführen von 'postMessage' auf 'DOMWindow': Der angegebene Zielursprung"

Question

Ich versuche, Google Picker zu laden.

ich dieses npm Paket bin mit https://www.npmjs.com/package/google-picker

Wenn die Picker Laden zeigen die Auth-Fenster, und ich kann mein Google-Konto auswählen.

Nachdem die Authentifizierung abgeschlossen ist, wird versucht, den iframe von Google Picker zu öffnen.

Es ist an dieser Stelle der iframe nicht geladen werden kann, und ich erhalte die Fehler

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

ich gesucht habe dieses Problem und viele Lösungen sagen, stellen Sie sicher, Ihre Domain zu dem autorisierten JS Ursprung in Google hinzufügen Konsole

Ich habe das getan! Die Domäne befindet sich definitiv in den autorisierten Domänen für den Client. Google Anmelden funktioniert mit meiner App .. aber ich kann den Picker einfach nicht zum arbeiten bringen.

Ich habe versucht, sowohl von localhost ausgeführt und auf den Server hochgeladen. Aber ich bekomme den gleichen Fehler.

Der Server, den ich verwende, ist HTTPS. Und die Iframe-URL für den Picker ist auch HTTPS. Das sollte also kein Problem sein.

Was kann ich noch versuchen? Ich habe keine Optionen mehr. Ich befolge die API genau. Ich habe alle richtigen Schlüssel eingegeben.

Answer 1

Der Grund Google Picker war nicht wirklich in keinem Zusammenhang mit der Konsole Fehler war zeigt.

Obwohl der Konsolenfehler aufgetreten ist, funktioniert der Picker immer noch.

Aber ich dachte, dass es nicht funktionierte, weil ich die Pickadate-Bibliothek verwendete, die css hatte, die mit Google Picker kollidiert.

Mehr Informationen zu diesem Thema hier: https://github.com/amsul/pickadate.js/issues/619

Answer 2

Von diesem SO post answer wird zitiert, dass das Problem mit dem Zielursprung ist, der https ist.

Ich glaube, das ist ein Problem mit der Zielherkunft https. I vermuten, dass es ist, weil Ihre iFrame-URL http anstelle von https verwendet. Versuchen Sie, die URL der Datei, die Sie einbetten möchten, auf , https, zu ändern.

Zum Beispiel:

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

zu sein:

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