不是来自 Google API Oauth 的客户端的有效来源
我从 Google API Oauth 收到此错误：
idpiframe_initialization_failed”，详细信息：“不是客户端的有效来源：http://127.0.0....为您的项目的客户端 ID 列出此来源
我正在尝试从此本地路径发送请求：
http://127.0.0.1:8887/
https://i.stack.imgur.com/Hg5jv.png
这是我的代码：
<!-- 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>
我怎样才能解决这个问题？
重置 Chrome 缓存为我解决了这个问题。长按重新加载按钮，然后是清空缓存和硬重新加载。
注意：确保您的 Chrome 开发工具面板已打开，否则长按将不起作用。
https://i.stack.imgur.com/4xfwi.png
我有一个和你非常相似的问题。我尝试从 localhost 添加多个列入白名单的端口，但没有任何效果。最终删除凭据并重新设置它们。我的设置一定是谷歌端的错误。
如果对您来说都一样，请尝试将 http://localhost:8887 添加到您授权的 JavaScript 源中。我自己在某个时候遇到了这个错误，这解决了它。知道您将不得不将此 URL 用于您的请求以及事件，尽管它转换为 http://127.0.0.1:8887/。
我在网络上的几个地方阅读了人们用来重做凭据的创建以使其正常工作。所以我做到了，我为同一个项目创建了一个新的凭证并使用了我的新用户 ID，它运行良好......看起来白名单的版本有点不稳定......
注意：我也使用 localhost 而不是 127.0.0.1，IP 无效。
我摆弄了大约 10 分钟，然后当我在浏览器中尝试 http://localhost/（而不是 127.0.0.1）时它终于工作了
在每个可以创建白名单的地方添加了 URL：https://console.developers.google.com/apis/credentials/
我有同样的问题；但这对我有用：
打开console.developers 打开项目名称 点击credentials 在“name”下，点击“web client 1” 在“URLs”下，添加“http://localhost:3000”
只是我的 2 美分 .. 在删除并重新创建凭据后能够让它工作。就像上面建议的那样。
“不是客户端的有效来源”似乎被 Google 的 API 过度使用，即它也被误导性地用于身份验证错误。
对于看到错误的人，请检查凭据是否正确。
（这可以解释为什么它在重新创建凭据后对某些人有效 - 在某些情况下，原始凭据可能不正确）。
我通过添加 http://localhost 和 http://localhost:8083 解决了。
万一有人错过了这个，在保存按钮旁边它会说：
注意：设置可能需要 5 分钟到几个小时才能生效
等待为我解决了这个问题。
我刚刚经历了所有这些解决方案，然后才意识到我正在投入
https://localhost:3000
我的开发服务器正在服务
http://localhost:3000
愚蠢，我知道，但其他人可能会犯同样的错误，也许这个评论会帮助他们:)
对我们有用的是将非本地主机域添加到授权来源。我的同事在添加一个不存在的本地域（例如 http://test-my-app.local）后让他的 localhost 域工作。
http://test-my-app.local，就像 OP 中的图片一样？我使用了那个确切的来源，但它没有用。在您按“Sav”之前，它的作用就像是正常工作，然后您会看到一条错误消息：The request failed because one of the field of the resource is invalid. 对于任何非常规 TLD，例如 .local 或 .test，都会发生这种情况。
当您使用相同的电子邮件 ID 创建客户端 ID 和通过网页登录时，可能会出现这种情况
好的，这真是太尴尬了，但对我来说，我关注的是 the docs 以获取 Flutter 应用程序的 Google Sign-in Web 包，其中显示：
在您的 web/index.html 文件中，在文档头部的某处添加以下元标记：
我复制了作为我的客户 ID 列出的内容并将其粘贴在开头，因此复制了元标记中内容标签的 apps.googleusercontent.com 部分。因此，确保您没有重复它可能会有所帮助！
