Der angegebene Ursprung ist für die angegebene Client-ID (GSI) nicht zulässig.

Lesezeit: 6 Minuten

Ich habe mein „Mit Google anmelden“ durch Ersetzen umgestaltet gapi mit gsi An http://localhost:8080.

Wie kann gapi Arbeite ohne Probleme während gsi behauptet, dass The given origin is not allowed for the given client ID.

Geben Sie hier eine Bildbeschreibung ein

Lücke

<script src="https://apis.google.com/js/api:client.js" async defer></script>
window.gapi.load('auth2', () => {
  const auth2 = window.gapi.auth2.init({ client_id })
  auth2.signIn().then(console.log)
})

gsi

<script src="https://accounts.google.com/gsi/client" async defer></script>
<div id="g_id_onload"
     :data-client_id="client_id"
     data-login_uri="http://localhost:8080"
     data-auto_prompt="false">
</div>
<div class="g_id_signin"
     data-type="standard"
     data-size="large"
     data-theme="outline"
     data-text="sign_in_with"
     data-shape="rectangular"
     data-logo_alignment="left">
</div>

Fehler raus mit: The given origin is not allowed for the given client ID

  • Habe das gleiche Problem. Interessant ist, dass ich jeden Werbeblocker deaktiviert habe und plötzlich der Fehler verschwand und die POST-Anfrage wie erwartet an meinem Endpunkt erschien. Können Sie dieses Verhalten bestätigen? Ich habe ABP, uBlock Origin, uBlock und Ad-Blocker. Mir ist aufgefallen, dass in meiner Konsole mehrere Ressourcen ausgefallen sind. Möglicherweise handelt es sich dabei um ein ernstes Problem mit dem GSI-Framework oder um meine Werbeblocker.

    – Jack

    21. Juli 2021 um 4:49

  • In ähnlicher Weise schlägt es im normalen Modus fehl, funktioniert aber im Inkognito-Modus einwandfrei.

    – Leo Bastin

    10. März 2022 um 10:15

  • @Jack Ich habe dieses Problem. Ich habe alle meine Werbeblocker (Ublock Origin und AdBlock) deaktiviert und habe immer noch das Problem.

    – Joshua Dance

    19. September 2022 um 17:06 Uhr

Ich habe Origin ohne Port hinzugefügt, um dieses Problem zu beheben.

Kernpunkt: Beides hinzufügen http://localhost Und http://localhost: zum Autorisierte JavaScript-Ursprünge Box für lokale Tests oder Entwicklung.

Quelle: https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid

  • @Venus713 Überprüfen Sie, ob Ihre Entwicklungs-URL genau dieselbe ist. Möglicherweise verwenden Sie https, es könnte also so etwas sein https://localhost:8080 Und https://localhost. Sie sollten auch überprüfen, ob Sie die richtige Client-ID verwenden.

    – Krähe

    20. August 2021 um 8:38


  • @Venus713 Ich habe das gleiche Problem im Chrome-Browser – beides localhost Und localhost:8080 werden zu autorisierten JavaScript-Ursprüngen hinzugefügt und die Client-ID ist korrekt, aber es tritt immer noch der gleiche Fehler auf. Der gleiche Code funktioniert jedoch im Inkognito-Modus.

    – Michail Zvagelsky

    5. Dezember 2021 um 20:38 Uhr

  • Ein kurzer Tipp für diejenigen, die vielleicht alles andere erfolglos versuchen: Denken Sie daran, dass 127.0.0.1 aus irgendeinem Grund nicht funktioniert und dieser Fehler weiterhin angezeigt wird, selbst wenn Sie ihn in Ihrem Google Dashboard registrieren. Aber sobald Sie stattdessen localhost verwenden, beginnt es zu funktionieren.

    – Behzad

    6. Juli 2022 um 14:11 Uhr

  • Vielen Dank für diesen Tipp. Ich wurde verrückt nach diesem Problem, da alles so eingerichtet war, wie es erklärt wurde. Aber das zusätzliche Hinzufügen von localhost ohne den Port hätte ich nie in Betracht gezogen. Vielen Dank dafür 🙂

    – zreptil

    14. Dezember 2022 um 6:38

  • Vielen Dank für diesen nützlichen Tipp zum Einrichten lokaler Umgebungstests.

    – Rickyras

    28. Dezember 2022 um 0:06

Dies kann auch passieren, wenn Ihr Server dies getan hat Referrer-Policy einstellen no-referrer. Google benötigt diesen HTTP-Header oder andere Anfragen dazu https://accounts.google.com/gsi/button Und https://accounts.google.com/gsi/iframe/select wird mit 400 antworten und diesen Fehler erzeugen

Wenn Sie einen Helm verwenden, wird die Anforderung durch die folgende Konfiguration behoben

referrerPolicy: {
  policy: 'strict-origin-when-cross-origin'
}

MDN-Artikel zur Referrer-Policy

  • Du bist mein Held! Ich habe eine Gatsby-Website, die auf Netlify gehostet wird, und zwar standardmäßig Referrer-Policy Header gibt es same-origin. Das einstellen auf strict-origin-when-cross-origin habe es gelöst – das hat mir eine Menge Kopfschmerzen erspart!

    – Martin Wedvich

    16. Februar 2022 um 18:09 Uhr

  • Wow… ich kann nicht glauben, dass das nirgendwo anders erwähnt wurde. Mein Problem wurde gelöst. In Django bedeutet es Einstellen SECURE_REFERRER_POLICY = "strict-origin-when-cross-origin" in den Einstellungen

    – Maxandron

    10. März 2022 um 14:50 Uhr

  • Wie stelle ich das in Laravel ein?

    – Linkshänder

    6. Juni 2022 um 6:10

  • Ich würde es gerne ausprobieren, weiß aber nicht, wie ich es für Javascript/Reactjs verwenden soll.

    – Miguel Ormita

    14. August 2022 um 23:43 Uhr

  • positiv bewertet, es hilft, 400 Problem gelöst, aber jetzt bekomme ich (blockiert:CoepFrameResourceNeedsCoepHeader)

    – Sanjay Nishad

    23. August 2022 um 5:23

Ich stand vor dem gleichen Problem. Aus irgendeinem Grund hat mir keine der hier besprochenen Lösungen geholfen. Ich habe das Problem gelöst, indem ich diese zu den autorisierten Ursprüngen in der Google Cloud Console hinzugefügt habe

  • http://localhost
  • http://localhost:

  • So seltsam, musste ich hinzufügen http://localhost obwohl ich auch auf Port 3000 war! Großer Fang! Hat mir viel Zeit gespart.

    – Benutzer3413723

    5. Okt. 2022 um 6:59

  • Oh Mann. Danke. Es ist wirklich seltsam, aber es funktioniert! Wenn du nicht wärst, glaube ich, dass ich tagelang hier festsitzen würde …

    – Vlad Dechanow

    14. Dezember 2022 um 17:59 Uhr

  • Ich freue mich, dass es bei dir geklappt hat!

    – osifo

    16. Dezember 2022 um 6:00 Uhr

Ein Kommentar von @Behzad, der eine eigene Antwort verdient:

Aus irgendeinem Grund funktioniert 127.0.0.1 nicht, selbst wenn Sie es in Ihrem Google Dashboard registrieren.

Aber sobald Sie es verwenden localhost Stattdessen beginnt es zu funktionieren.

Ich habe Live Server für VSCode verwendet und musste nachschlagen, wie ich den Host ändern kann, auf dem er bereitgestellt wird.

Gehen Sie zu Code > Einstellungen > Einstellungen > Live-Server-Konfiguration > Host und ändern Sie es in „Lokaler Host“.
Geben Sie hier eine Bildbeschreibung ein

Stellen Sie dann sicher, dass localhost in Ihrem Google Dashboard registriert ist:
Geben Sie hier eine Bildbeschreibung ein

Beim Testen habe ich eine Lösung gefunden, da ich trotz Hinzufügen der Site-Domain zu die folgenden Fehlermeldungen zu diesem Problem erhalten habe Authorised JavaScript origins:

Das Laden der Ressource ist fehlgeschlagen: Der Server hat mit dem Status 403 () geantwortet.

[GSI_LOGGER]: Der angegebene Ursprung ist für die angegebene Client-ID nicht zulässig.

Wenn Sie einen Domänennamen verwenden, ist dies nicht der Fall localhoststellen Sie sicher, dass Sie über auf Ihre Website zugreifen https (Verwendung eines selbstsignierten Zertifikats, wenn noch kein Zertifikat verfügbar ist/bei Tests in Ihrer Nicht-Produktumgebung).

  • Das war das! Danke schön. Ich habe 127.0.0.1 verwendet und sowohl localhost als auch 127.0.0.1 hinzugefügt, aber es hat nicht funktioniert. Bei Eingabe über localhost. Das ist gut!

    – Spitzname0222022022

    7. August 2022 um 9:06 Uhr

Marvins Benutzeravatar
Marvin

Basierend auf ihrer Dokumentation heißt es

Wenn Sie lokale Tests oder Entwicklungen durchführen, müssen Sie sowohl http://localhost als auch http://localhost: zum Feld „Autorisierte JavaScript-Ursprünge“ hinzufügen. Der Referrer-Policy-Header muss auch auf no-referrer-when-downgrade gesetzt werden, wenn http und localhost verwendet werden.

In Ihrem Fall müssen Sie anscheinend etwas hinzufügen no-referrer-when-downgrade Anweisungen der gerenderten Schaltfläche

  • Das war das! Danke schön. Ich habe 127.0.0.1 verwendet und sowohl localhost als auch 127.0.0.1 hinzugefügt, aber es hat nicht funktioniert. Bei Eingabe über localhost. Das ist gut!

    – Spitzname0222022022

    7. August 2022 um 9:06 Uhr

Benutzer-Avatar von Philip Sopher
Philip Sopher

Für meine Live-App brauchte ich beides https://example.com Und https://www.example.com als Ursprung festgelegt werden

1454110cookie-checkDer angegebene Ursprung ist für die angegebene Client-ID (GSI) nicht zulässig.

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy