2012-11-18 17 views
5

Ich bin auf einem einfachen JavaScript-Code arbeiten ich hier gefunden: http://googleappsdeveloper.blogspot.com/2011/12/using-new-js-library-to-unlock-power-of.htmlGoogle Calendar API JavaScript-Fehler: Origin Mismatch

Sie erwirbt im Grunde die Authentifizierung an einen Google-Kalender und ruft die Liste der Ereignisse in ihm enthalten sind. Ich habe meine Webanwendung registriert und eine Client-ID und einen API-Schlüssel erhalten.

Ich bin mit diesem Fehler konfrontiert: "Fehler: Ursprung nicht übereinstimmen", ich leite das Javascript lokal mit localhost und ich meine Homepage in der Google-Anmeldung Registrierung auf localhost als auch.

jede Hilfe würde immens geschätzt werden.

der Code:

<html> 
    <body> 
    <div id='content'> 
     <h1>Events</h1> 
     <ul id='events'></ul> 
    </div> 
    <a href='#' id='authorize-button' onclick='handleAuthClick();'>Login</a> 

    <script> 
    var clientId = '506979856128.apps.googleusercontent.com'; 
var apiKey = 'AIzaSyAGbQAZQU0YNL8hK5EU69exIg7_sOg3JoA'; 
var scopes = 'https://www.googleapis.com/auth/calendar'; 

     function handleClientLoad() { 
    gapi.client.setApiKey(apiKey); 
    window.setTimeout(checkAuth,1); 
    checkAuth(); 
} 

function checkAuth() { 
    gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, 
     handleAuthResult); 
} 

function handleAuthResult(authResult) { 
    var authorizeButton = document.getElementById('authorize-button'); 
    if (authResult) { 
    authorizeButton.style.visibility = 'hidden'; 
    makeApiCall(); 
    } else { 
    authorizeButton.style.visibility = ''; 
    authorizeButton.onclick = handleAuthClick; 
    } 
} 

function handleAuthClick(event) { 
    gapi.auth.authorize(
     {client_id: clientId, scope: scopes, immediate: false}, 
     handleAuthResult); 
    return false; 
} 

function makeApiCall() { 
    gapi.client.load('calendar', 'v3', function() { 
    var request = gapi.client.calendar.events.list({ 
     'calendarId': 'primary' 
    }); 

    request.execute(function(resp) { 
     for (var i = 0; i < resp.items.length; i++) { 
     var li = document.createElement('li'); 
     li.appendChild(document.createTextNode(resp.items[i].summary)); 
     document.getElementById('events').appendChild(li); 
     } 
    }); 
}); 
} 
    </script> 
    <script src="https://apis.google.com/js/client.js?onload=handleClientLoad">     </script> 
</body> 
</html> 

Antwort

2

bekam ich die gleiche Fehler Herkunft Mismatch today.after bisschen suchen bekam ich den Grund.

Während die Google-API-Zugriff zu schaffen, müssen wir Autorisierte Redirect URIs und Autorisierte Redirect URIs angeben.

Nun, wenn Sie rufen Sie die Anmeldung von URIs andere als in angegebenen autorisierten Redirect URIs, error:Unknown Origin is thrown

FYI: Ich habe gesehen, dass Sie die Javascript lokal mit localhost ausgeführt werden. Dies bedeutet, dass Sie localhost uri nicht zu autorisierten Weiterleitungs-URIs hinzugefügt haben.

Aber verschwenden Sie nicht Ihre Zeit damit.Authorized Redirect URIs akzeptieren nicht localhost uri.Es ist aufgrund der gleichen Herkunft chrome.and Wenn Sie chrome mit dem disable-web-Sicherheits-Flag, wird es lokal arbeiten auch.

+0

Klingt vernünftig aber ... '' 'cd"/Anwendungen/Google Chrome Canary.app/Contents/MacOS/ "' '' -> '' './Google \ Chrome \ Canary --disable- Web-Sicherheit '' '->' '' Trace/BPT-Trap: 5''' -> '' 'Google Chrome unerwartet beendet.''' –

+0

lief es in Firefox ... funktioniert gut –

+0

@CraigMorgan: Chrom Erweiterung in FF ?? –

1

Das Problem des Ursprungskonflikt kann durch die Pflege für Redirect URIs und Javascript Origins gelöst werden, wenn Client-ID in Google Developers Console zu schaffen.

The Javascript Origins sollte nicht Ende mit /.

Beispiel: http://example.com/ -> Das korrekte Format ist http://example.com.

Verwandte Themen