集成Google登录遇403错误：给定Origin不被Client ID允许求助

我正在集成Google登录，试过各种方案都没用。已经设置了Referrer-policy，当前Origin是127.0.0.1:8000，但一直收到403错误，日志显示：

m=credential_button_library:66 [GSI_LOGGER]: The given origin is not allowed for the given client ID

相关代码示例 #

JavaScript代码

function handleCredentialResponse(response) {
    // 处理凭证响应（例如验证ID令牌）
    console.log("ID Token: " + response.credential);
}

window.onload = function() {
  // 初始化Google登录
  google.accounts.id.initialize({
    client_id: 'MY_CLIENTID.apps.googleusercontent.com',
    callback: handleCredentialResponse
  });

  // 渲染Google登录按钮
  google.accounts.id.renderButton(
    document.getElementById("g_id_signin"),
    { theme: "outline", size: "large" }
  );
};

HTML代码

<meta name="referrer" content="no-referrer-when-downgrade" />
<meta name="google-signin-client_id" content="MY_CLIENTID.apps.googleusercontent.com">
<script src="https://accounts.google.com/gsi/client" async defer></script>

<div id="g_id_signin"></div>

错误截图 #

这个错误的核心原因是你的Google OAuth客户端ID未将127.0.0.1:8000加入允许的来源列表，按以下步骤修复：

• 打开Google云控制台的OAuth 2.0客户端ID管理页面
• 找到你代码中使用的客户端ID（对应MY_CLIENTID.apps.googleusercontent.com）
• 在「已获授权的JavaScript来源」栏目中添加http://127.0.0.1:8000
• 保存配置，等待1-2分钟让设置生效（Google配置存在延迟）
• 刷新本地页面重新测试

额外注意点：

• 别搞混「已获授权的重定向URI」和「已获授权的JavaScript来源」，前者用于后端回调，后者才是前端页面的Origin
• 本地测试时，localhost:8000和127.0.0.1:8000是两个独立来源，要根据实际访问地址添加
• 代码里的<meta name="google-signin-client_id">可以删除，因为google.accounts.id.initialize已经指定了client_id，重复设置可能引发冲突

内容的提问来源于stack exchange，提问作者philip