Google Calendar API javascript错误：原因不匹配

Question

I'm working on a simple javascript code I found here: http://googleappsdeveloper.blogspot.com/2011/12/using-new-js-library-to-unlock-power-of.html 我正在处理一个我在此处找到的简单JavaScript代码： http ： //googleappsdeveloper.blogspot.com/2011/12/using-new-js-library-to-unlock-power-of.html

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. 我已经注册了我的Web应用程序并获得了客户端ID和API密钥。

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. 我正面临这样的错误：“错误：原因不匹配”，我正在使用localhost在本地运行javascript，我也将我的主页在google应用程序注册中设置为localhost。

any help would be immensely appreciated. 任何帮助都会非常感激。

the 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>

Answer 1

I got the same error origin mismatch today.after bit of search i got the reason. 我今天得到了相同的错误原因不匹配。在搜索之后，我得到了原因。

While creating the Google Api Access,we have to specify Authorized Redirect URIs and Authorized Redirect URIs . 在创建Google Api Access时，我们必须指定授权重定向URI和授权重定向URI 。

Now if you call the Login from URIs other than specified in Authorized Redirect URIs , error:Unknown Origin is thrown 现在，如果您从Authorized Redirect URIs中指定的URI之外调用Login，则会error:Unknown Origin is thrown

FYI :I have seen that you are running the javascript locally using localhost. 仅供参考 ：我已经看到你使用localhost在本地运行javascript。 It means that You have not added localhost uri to Authorized Redirect URIs. 这意味着您尚未将localhost uri添加到授权重定向URI。

But Don't waste your time doing that.Authorized Redirect URIs will not accept localhost uri.It's due to Chrome's same origin policy.and If you run chrome with the disable-web-security flag, it'll work locally too. 但是不要浪费你的时间去做。授权的重定向URI不接受localhost uri。这是由于Chrome的原始策略相同。如果你使用disable-web-security标志运行chrome，它也会在本地工作。

Answer 2

The problem of origin mismatch can be solved by taking care for Redirect URIs and Javascript Origins when creating Client ID in Google Developers Console . 在Google Developers Console中创建客户端ID时，可以通过注意重定向URI和Javascript起源来解决原点不匹配的问题。

The Javascript Origins should not end with / . JavaScript源 不应该结束/ 。

Example : http://example.com/ --> The correct format will be http://example.com . 示例： http://example.com/ ： http://example.com/ - >正确的格式为http://example.com 。

Google Calendar API javascript错误：原因不匹配

问题描述

2 个解决方案

解决方案1
2 2013-01-28 12:59:19

解决方案2
1 2014-03-11 04:02:37

Google Calendar API javascript错误：原因不匹配

问题描述

2 个解决方案

解决方案1 2 2013-01-28 12:59:19

解决方案2 1 2014-03-11 04:02:37

解决方案1
2 2013-01-28 12:59:19

解决方案2
1 2014-03-11 04:02:37