给定的客户端 ID (GSI) 不允许给定的来源

Question

我重构了我的“使用 Google 登录”，将 gapi 替换为 gsi on http://localhost:8080 。

gapi 怎么能毫无问题地工作，而 gsi 声称 The given origin is not allowed for the given client ID 。

加皮

<script src="https://apis.google.com/js/api:client.js" async defer></script>

 window.gapi.load('auth2', () => {
  const auth2 = window.gapi.auth2.init({ client_id })
  auth2.signIn().then(console.log)
})

gsi

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

 <div id="g_id_onload"
     :data-client_id="client_id"
     data-login_uri="http://localhost:8080"
     data-auto_prompt="false">
</div>
<div class="g_id_signin"
     data-type="standard"
     data-size="large"
     data-theme="outline"
     data-text="sign_in_with"
     data-shape="rectangular"
     data-logo_alignment="left">
</div>

错误： The given origin is not allowed for the given client ID

原文由 Crow 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我添加了没有端口的 origin 来解决这个问题。

要点：将 http://localhost 和 http://localhost: 添加到 Authorized JavaScript origins 框以进行本地测试或开发。

来源： https ://developers.google.com/identity/gsi/web/guides/get-google-api-clientid

原文由 Crow 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您的服务器将 Referrer-Policy 设置为 no-referrer 也会发生这种情况。 Google 需要此 HTTP 标头，否则对 https://accounts.google.com/gsi/button 和 https://accounts.google.com/gsi/iframe/select 的请求将以 400 响应并产生该错误

如果使用头盔 - 以下配置将修复请求

referrerPolicy: {
  policy: 'strict-origin-when-cross-origin'
}

推荐人政策的 MDN 文章

原文由 cloakedninjas 发布，翻译遵循 CC BY-SA 4.0 许可协议