Google ClientID适配旧版Google Sign-In库，新版GIS库报403来源不允许求助

关键原因 #

新版Google Identity Services（GIS）的来源校验逻辑比旧版Google Sign-In更严格，即便旧版能正常使用localhost，GIS也要求客户端ID的授权来源配置完全匹配当前访问地址，和你在Vue的Login.vue还是main.js里加载客户端ID无关。

具体排查修复步骤 #

• 检查OAuth客户端ID的授权来源配置
  登录Google Cloud控制台，进入「API和服务」→「凭据」，找到对应客户端ID：

  • 确认「已获授权的JavaScript来源」中添加了精确匹配的localhost地址，比如http://localhost:8080（要包含协议、域名、端口，和你Vue项目运行的地址完全一致）
  • 旧版可能允许省略端口或模糊匹配，但GIS必须精确配置，少一个字符都会触发403

• 核对Vue项目的运行地址
  查看vue.config.js（或vite.config.js）里的端口配置，确保和控制台里的授权来源端口一致；如果用了代理，要保证前端实际访问的地址是已授权的来源

• 清除浏览器缓存
  浏览器可能缓存了旧的GIS验证信息，用无痕模式打开页面测试，或手动清除缓存和Cookie后重试

• 确认客户端ID正确性
  检查Login.vue中硬编码的客户端ID是否和控制台里的完全一致，没有拼写错误、多余空格，可临时在控制台打印ID对比

• 规范GIS脚本加载方式
  在mounted中加载GIS脚本时，确保脚本加载完成后再初始化按钮，示例代码：

mounted() {
  const gsiScript = document.createElement('script');
  gsiScript.src = 'https://accounts.google.com/gsi/client';
  gsiScript.onload = () => {
    window.google.accounts.id.initialize({
      client_id: '你的客户端ID',
      callback: this.handleGoogleLogin
    });
    window.google.accounts.id.renderButton(
      document.getElementById('google-signin-btn'),
      { theme: 'outline', size: 'large' }
    );
  };
  document.body.appendChild(gsiScript);
}

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