title: Google Calendar API javascript Error:Origin Mismatch
body: <p>I'm working on a simple javascript code I found here: <a href="http://googleappsdeveloper.blogspot.com/2011/12/using-new-js-library-to-unlock-power-of.html" rel="nofollow">http://googleappsdeveloper.blogspot.com/2011/12/using-new-js-library-to-unlock-power-of.html</a></p>
  
  <p>It basically acquires authentication to a google Calendar and retrieves the list of events contained in it. I have registered my web application and obtained a client ID and API Key.</p>
  
  <p>I'm facing this error: "Error: Origin mismatch", I'm running the javascript locally using localhost and I set my homepage in the google application registration to localhost as well.</p>
  
  <p>any help would be immensely appreciated.</p>
  
  <p>the code: </p>
  
  <pre><code>&lt;html&gt;
    &lt;body&gt;
      &lt;div id='content'&gt;
        &lt;h1&gt;Events&lt;/h1&gt;
        &lt;ul id='events'&gt;&lt;/ul&gt;
      &lt;/div&gt;
      &lt;a href='#' id='authorize-button' onclick='handleAuthClick();'&gt;Login&lt;/a&gt;
  
      &lt;script&gt;
      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 &lt; resp.items.length; i++) {
          var li = document.createElement('li');
          li.appendChild(document.createTextNode(resp.items[i].summary));
          document.getElementById('events').appendChild(li);
        }
      });
   });
  }
      &lt;/script&gt;
      &lt;script src="https://apis.google.com/js/client.js?onload=handleClientLoad"&gt;                 &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>