OAuth客户端ID授权JavaScript源异常致Google登录失败求助

我正在开发一款React应用，需要集成Google Sign-In用于后续Cloud Run API的认证（Cloud Run后端地址在API组件中）。目前Google登录按钮能正常渲染，但点击后模态框没有内容，控制台报错：

[GSI_LOGGER]: The given origin is not allowed for the given client ID.

登录组件代码如下：

import React, { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
//will be using useNavigate later 😛
import API from '../API';
import './Home.css';

const Login = () => {
const navigate = useNavigate();

useEffect(() => {
const loadGoogleSignInScript = () => {
const script = document.createElement('script');
script.src = 'https://accounts.google.com/gsi/client';
script.async = true;
script.defer = true;
script.onload = () => initializeGoogleSignIn();
document.body.appendChild(script);
};

const initializeGoogleSignIn = () => {
if (!window.google) {
console.error('Google Sign-In library not loaded');
return;
}

window.onSignInSuccess = (response) => {
console.log('Signed in successfully:', response);

const idToken = response.getAuthResponse().id_token;

API.defaults.headers.common['Authorization'] = `Bearer ${idToken}`;
};

window.onSignInFailure = (error) => {
console.error('Error signing in:', error);
};

window.google.accounts.id.initialize({
client_id: process.env.REACT_APP_GOOGLE_CLIENT_ID,
callback: {
on_success: window.onSignInSuccess,
on_failure: window.onSignInFailure,
},
});

window.google.accounts.id.renderButton(
document.getElementById("signInDiv"),
{ theme: "outline", size: "large" }
);
};

loadGoogleSignInScript();
}, []);

return (
<div className="login-container">
<img id="sdn" src={`${process.env.PUBLIC_URL}/SDNAIRGROUP.png`} alt="SDN Air Group" />
<div id="signInDiv"></div>
</div>
);
};

export default Login;

我已经确认客户端ID正确，且该ID的Authorized JavaScript origins已设置为测试用Firebase模拟器地址，尝试过清除缓存Cookie、重启浏览器，问题仍然存在，求技术帮助。

1. 严格核对授权来源格式 #

Google OAuth对授权来源的格式要求非常严格，必须确保：

• 地址末尾无斜杠（例如用http://localhost:5000而非http://localhost:5000/）
• 协议、域名、端口与当前应用运行地址完全匹配（检查浏览器地址栏的完整URL，确认Firebase模拟器实际运行端口）
• 本地开发时区分http和https，两者不可混用

2. 验证Google Cloud Console配置 #

• 登录Google Cloud Console，找到对应OAuth 2.0客户端ID
• 确认Authorized JavaScript origins中已添加当前应用的实际访问地址（包括本地localhost地址，若用Firebase模拟器需核对端口）
• 注意：测试环境地址需单独添加，不能直接复用生产环境配置

3. 检查环境变量加载情况 #

在组件中添加日志，验证环境变量是否正确读取：

console.log('Google Client ID:', process.env.REACT_APP_GOOGLE_CLIENT_ID);

若输出为空或错误，需排查：

• .env文件是否放在项目根目录
• 变量名是否严格为REACT_APP_GOOGLE_CLIENT_ID（React要求自定义环境变量必须以REACT_APP_开头）
• 修改.env后是否重启了开发服务器

4. 修正Sign-In初始化的回调格式 #

Google Identity Services的API规范中，初始化配置的回调需单独传入，而非嵌套对象。修改初始化代码：

window.google.accounts.id.initialize({
  client_id: process.env.REACT_APP_GOOGLE_CLIENT_ID,
  callback: window.onSignInSuccess, // 直接传入成功回调
  error_callback: window.onSignInFailure, // 错误回调使用error_callback字段
});

原写法不符合API规范，可能导致回调失效或模态框加载异常。

5. 清除Google OAuth授权缓存 #

• 访问Google账号权限管理页面，移除当前应用的授权记录后重新登录
• 使用浏览器隐私模式测试，排除本地缓存干扰

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