VueJS集成Google GSI登录报错：给定来源不被客户端ID允许

问题详情 #

在VueJS应用中集成Google登录时，组件挂载阶段触发两个错误：

• Failed to load resource: the server responded with a status of 400 ()
• [GSI_LOGGER]: The given origin is not allowed for the given client ID

已确认Client ID无误，且已将http://localhost:8080和http://localhost添加至Google Cloud控制台的授权JavaScript来源列表，但问题仍未解决。

相关代码 #

Vue组件代码（<script setup>）

<script setup>
import { onMounted, ref } from 'vue'

const googleButton = ref(null)

onMounted(() => {
  google.accounts.id.initialize({
    client_id: "734095511167-hbu1na03bb2po3qc886ut75p6ae538sb.apps.googleusercontent.com",
    use_fedcm_for_prompt: true,
    callback: (response) => {
      console.log(response)
    }
  })

  google.accounts.id.renderButton(googleButton.value, {})
})
</script>

入口文件（index.html）脚本引入

<script src="https://accounts.google.com/gsi/client"></script>

配置与错误截图 #

解决方案 #

1. 严格校验授权来源格式 #

Google对授权来源的格式要求苛刻，需注意：

• 不要在URL末尾加斜杠（/），确保是http://localhost:8080而非http://localhost:8080/
• 核对协议：如果本地用HTTPS启动服务，必须添加https://localhost:8080到授权列表
• 检查端口号：确认授权来源的端口和本地Vue服务的端口完全一致

2. 确认Client ID与项目匹配 #

登录Google Cloud控制台，进入API和服务 > 凭据页面：

• 找到当前使用的Client ID，查看其所属项目是否和配置授权来源的项目为同一个
• 核对该Client ID的授权来源列表，确保已添加的地址无遗漏或错误

3. 清除浏览器缓存与Google Cookie #

Google会缓存授权验证信息，清除浏览器缓存及Google相关Cookie后，重启本地服务再测试

4. 临时关闭FedCM配置（排查用） #

代码中启用了use_fedcm_for_prompt: true，部分浏览器对FedCM有额外来源限制，可先注释该行测试：

google.accounts.id.initialize({
  client_id: "你的Client ID",
  // use_fedcm_for_prompt: true, 临时注释
  callback: (response) => {
    console.log(response)
  }
})

5. 确保GSI脚本加载完成后再初始化 #

若脚本加载时机过早，可能导致初始化时google对象未就绪，可改为动态加载脚本：

<script setup>
import { onMounted, ref } from 'vue'

const googleButton = ref(null)

onMounted(async () => {
  await new Promise(resolve => {
    const script = document.createElement('script')
    script.src = 'https://accounts.google.com/gsi/client'
    script.onload = resolve
    document.body.appendChild(script)
  })

  google.accounts.id.initialize({
    client_id: "734095511167-hbu1na03bb2po3qc886ut75p6ae538sb.apps.googleusercontent.com",
    use_fedcm_for_prompt: true,
    callback: (response) => {
      console.log(response)
    }
  })

  google.accounts.id.renderButton(googleButton.value, {})
})
</script>

6. 检查实际访问地址 #

若本地服务通过127.0.0.1:8080而非localhost:8080访问，需将http://127.0.0.1:8080也添加到授权来源列表

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