来自Google API OAuth的客户端起点无效

72

我收到了来自Google API Oauth的错误:

idpiframe_initialization_failed,详情:"Not a valid origin for the client: http://127.0.0.…itelist this origin for your project's client ID

我正试图从此本地路径发送请求:

http://127.0.0.1:8887/

而我已经将此URL添加到“已授权JavaScript起源”部分: enter image description here

这是我的代码:

<!-- The top of file index.html -->
<html itemscope itemtype="http://schema.org/Article">
<head>
  <!-- BEGIN Pre-requisites -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
  </script>
  <script src="https://apis.google.com/js/client:platform.js?onload=start" async defer>
  </script>
  <!-- END Pre-requisites -->

<!-- Continuing the <head> section -->
  <script>
    function start() {
      gapi.load('auth2', function() {
        auth2 = gapi.auth2.init({
          client_id: 'MY CLIENT ID.apps.googleusercontent.com',
          // Scopes to request in addition to 'profile' and 'email'
          //scope: 'https://www.google.com/m8/feeds/'
        });
      });
    }
  </script>




</head>
<body>


<button id="signinButton">Sign in with Google</button>
<script>
  $('#signinButton').click(function() {
    // signInCallback defined in step 6.
    auth2.grantOfflineAccess().then(signInCallback);
  });
</script>



<!-- Last part of BODY element in file index.html -->
<script>
function signInCallback(authResult) {
  if (authResult['code']) {

    // Hide the sign-in button now that the user is authorized, for example:
    $('#signinButton').attr('style', 'display: none');

    // Send the code to the server
    $.ajax({
      type: 'POST',
      url: 'http://example.com/storeauthcode',
      // Always include an `X-Requested-With` header in every AJAX request,
      // to protect against CSRF attacks.
      headers: {
        'X-Requested-With': 'XMLHttpRequest'
      },
      contentType: 'application/octet-stream; charset=utf-8',
      success: function(result) {
        // Handle or verify the server response.
      },
      processData: false,
      data: authResult['code']
    });
  } else {
    // There was an error.
  }
}
</script>
  <!-- ... -->
</body>
</html>

我该如何修复这个问题?


1
可能是Google API身份验证:客户端的来源无效的重复问题。 - Linda Lawton - DaImTo
1
我现在也遇到了同样的问题。 - Praytic
你能修好它吗? - Praytic
2
我刚刚创建了新的客户端ID,它可以正常工作。 - Praytic
在截图中显示的“授权JavaScript来源部分”如何进入? - stevepowell2000
14个回答

170

对我而言,清除Chrome缓存解决了问题。长按刷新按钮,选择“清空缓存并硬性刷新”即可。

注意:确保您的Chrome开发者工具面板已打开,否则长按无效。

输入图片描述


9
一种解决方法是使用隐身模式检查。有时清除缓存无法解决问题。 - Black Mamba
3
我已经在查看控制台日志中的错误,并刚刚在开发者工具的网络选项卡中勾选了“禁用缓存”选项,然后问题就解决了。 - Nishant Desai
我很高兴浏览了其他答案后看到这个。它有效而且非常简单快捷。 - Bob Horn
除了被接受的答案之外,这个答案也是必须尝试的。我已经按照被接受的答案中指定的一切做了,然后再尝试了这个答案。 - utkarsh-k
在 Firefox 中,您可以通过打开开发工具并启用“禁用缓存(当工具箱打开时)”选项来实现相同的效果。这对我很有帮助。 - gene_wood
显示剩余2条评论

123

我遇到了与你非常相似的问题。我试图从localhost添加多个白名单端口,但什么也没用。最终删除了凭据并重新设置它们。可能是谷歌在我的设置上出现了错误。


16
这个有效……过去解决了很多谷歌API问题的办法……一定要记住这个。 (谷歌到底怎么了???) - Farzher
9
这不好笑,这很悲伤。 - Rudey
4
很遗憾的是,自从那时起我得到了很多赞(并且仍在继续得到),但似乎没有什么改变。 - Andrew McOlash
2
这个回答让我想起了我在Windows技术支持工作时的日子。“你试过重新启动吗?”解决了95%的问题。点个赞! - Michael Ekoka
4
没错,现在是2019年,问题仍未得到解决。 - Geoffrey H
显示剩余13条评论

20

如果你愿意的话,尝试将http://localhost:8887添加到你授权的JavaScript来源中。我曾经也遇到过这个错误,用这种方法解决了。请注意,即使它转换为http://127.0.0.1:8887/,你仍然需要使用此URL进行请求。


8
你怎么做到的? - BradLaney
1
我之前在localhost:3000尝试过,但是它不起作用,但是localhost:8887可以,我无法想象那么简单!谢谢! - G4BB3R

11

我在网上看到很多人都会重新创建凭据来使它起作用。
所以我也这样做了,我为同一个项目创建了新的凭据,并使用我的新的用户ID,结果完美...看起来白名单的编辑有些不稳定...

Nb:我还使用了localhost而不是127.0.0.1,因为IP地址无效。


7

6

我曾经也有同样的问题,但以下操作适用于我:

  1. 打开console.developers
  2. 打开项目名称
  3. 点击凭据
  4. 在"名称"下,点击"网页客户端1"
  5. 在"URLs"下添加"http://localhost:3000"

3

如果有人错过了这一点,在保存按钮旁边它确实写着:

注意:设置可能需要5分钟到几个小时才能生效

等待对我解决了这个问题。


3

这只是我的两分钱意见,删除并重新创建凭据后,我成功地使其工作。就像上面建议的那样。


2
“客户端的起源无效”似乎被谷歌API过度使用,即它被误导地用于身份验证错误。
对于看到此错误的人,请检查凭据是否正确。
(这可能解释了为什么重新创建凭据后对某些人有效-在某些情况下,原始凭据可能不正确)。

ID不必以“.apps.google.com”结尾。当您在现有客户端中添加新的白名单URL时,会出现错误。创建一个新的客户端可以解决这个问题。 - Dipen Bhikadya
1
谢谢,我已经更新了。谷歌的一些文档在示例中确实使用了“<client-id>.apps.google.com”,因此谷歌似乎正在传播这个明显的谬论。 - mahemoff
更改客户端ID而不包含“.apps.google.com”对我有效。 - ejlp12

2
我刚刚浏览了所有这些解决方案,才意识到我输入的是

https://localhost:3000

而我的开发服务器正在提供

http://localhost:3000

很蠢,我知道,但可能会有其他人犯同样的错误,也许这个评论会对他们有所帮助 :)

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接