不是来自 Google API Oauth 的客户端的有效来源

Posted 2023-02-16

技术标签:

【中文标题】不是来自 Google API Oauth 的客户端的有效来源【英文标题】：Not a valid origin for the client from Google API Oauth 【发布时间】：2017-10-19 12:04:36 【问题描述】：

我从 Google API Oauth 收到此错误：

idpiframe_initialization_failed”，详细信息：“不是客户端的有效来源：http://127.0.0....为您的项目的客户端 ID 列出此来源

我正在尝试从此本地路径发送请求：

http://127.0.0.1:8887/

我已经将此 URL 添加到授权的 javascript 来源部分：

这是我的代码：

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

我该如何解决这个问题？

【问题讨论】：

Google API authentication: Not valid origin for the client的可能重复我现在期待同样的问题。你能修复它吗？我刚刚创建了新的客户端 ID，它工作正常。您如何进入屏幕截图所示的“授权的 JavaScript 起源部分”？ 【参考方案1】：

如果对您来说都一样，请尝试将 http://localhost:8887 添加到您授权的 JavaScript 源中。我自己在某个时候遇到了这个错误，这解决了它。知道您将不得不使用此 URL 来处理您的请求以及事件，尽管它转换为 http://127.0.0.1:8887/。

【讨论】：

你是怎么做到的？我之前在 localhost:3000 尝试过，但没有成功，但是 localhost:8887 成功了，我无法想象这会如此简单！谢谢！【参考方案2】：

我遇到了和你非常相似的问题。我尝试从localhost 添加多个列入白名单的端口，但没有任何效果。最终删除凭据并重新设置它们。我的设置一定是谷歌端的错误。

【讨论】：

LOL 这行得通...这是过去许多 google api 问题的解决方案...绝对需要记住这一点。（wtf 谷歌？？？）这不好笑。这很可悲。可悲的是，我得到了如此多的赞成票（并继续得到他们）这个答案，因为似乎什么都没有改变这个答案让我想起了我的 Windows 技术支持日。 “你试过重启吗？”修复了 95% 的问题。投赞成票！是的，2019 年在这里，还没有修复【参考方案3】：

我在网络上的几个地方阅读了人们用来重新创建凭据以使其正常工作的内容。所以我做到了，我为同一个项目创建了一个新的凭据，并使用了我的新 user-id 并且它工作得很好......看起来白名单的版本有点不稳定...... p>

注：我也用 localhost 代替 127.0.0.1，IP 无效。

【讨论】：

这节省了我的时间。【参考方案4】：

我摆弄了大约 10 分钟，然后当我尝试时它终于奏效了浏览器中的http://localhost/（而不是127.0.0.1）

在每个可以创建白名单的地方添加了网址： https://console.developers.google.com/apis/credentials/

【讨论】：

【参考方案5】：

“Not a valid origin for the client”似乎被 Google 的 API 过度使用，即它也被误导性地用于身份验证错误。

对于看到错误的人，请检查凭据是否正确。

（这可能解释了为什么它在重新创建凭据后对某些人有效 - 在某些情况下，原始凭据可能不正确）。

【讨论】：

ID 不必以“.apps.google.com”结尾。当您在现有客户端中添加新的列入白名单的 URL 时，确实会发生错误。创建新客户端可解决此问题。谢谢，我更新了。谷歌的一些文档在示例中确实使用了“.apps.google.com”，因此谷歌他们似乎在传播这个明显的神话。【参考方案6】：

重置 Chrome 缓存为我解决了这个问题。长按重新加载按钮，然后清空缓存和硬重新加载。

注意：确保您的 Chrome 开发工具面板已打开，否则长按将不起作用。

【讨论】：

一种解决方案是在隐身模式下查看。有时硬重新加载不适合。我已经在检查控制台日志是否有错误，我刚刚检查了开发控制台中网络选项卡中的“禁用缓存”选项，瞧，错误消失了。我很高兴我翻阅了其他答案以查看此内容。它很有效，而且非常简单快捷。除了接受的答案之外，这是一个必须尝试的答案。我已经完成了接受的答案中指定的所有内容，然后是这个答案。在 Firefox 中，您可以通过打开开发工具并启用 "Disable Cache (when toolbox is open)" 选项来实现相同的目的。这为我解决了。【参考方案7】：

我刚刚经历了所有这些解决方案，然后才意识到我正在投入

https://localhost:3000

我的开发服务器正在服务

http://localhost:3000

愚蠢，我知道，但其他人可能会犯同样的错误，也许这条评论会帮助他们:)

【讨论】：

【参考方案8】：

对我们有用的是将非本地主机域添加到授权来源。我的同事在添加一个不存在的本地域后让他的 localhost-domains 工作，例如http://test-my-app.local.

【讨论】：

你是说你（或你的同事）在授权的 JavaScript 起源中使用了http://test-my-app.local，就像来自 OP 的图片一样？我使用了那个确切的来源，但它没有用。在您按下“Sav”之前，它的作用就像是正常工作，然后您会看到一条错误消息：The request failed because one of the field of the resource is invalid. 对于任何非常规 TLD，例如 .local 或 .test，我都会发生这种情况。【参考方案9】：

我也有同样的问题；但这对我有用：

console.developers

凭证

name

web client 1

URLs

http://localhost:3000

【讨论】：

【参考方案10】：

如果您使用相同的电子邮件 ID 创建客户端 ID 并通过网页登录

【讨论】：

【参考方案11】：