React应用Google OAuth登录异常：本地正常，Vercel部署后失效

可能的问题原因及解决建议 #

1. Google Console配置遗漏 #

• 检查是否添加了Vercel预览域名（如*.vercel.app）到已获授权的JavaScript来源和已获授权的重定向URI中，Vercel分支预览会生成随机域名，未添加会导致授权失败。
• 确认生产域名的完整回调路径已配置，即使使用ID Token验证方式，部分场景仍需确保重定向URI匹配。

2. 后端ID Token验证逻辑问题 #

• 后端需使用Google官方库（如google-auth-library）验证ID Token的合法性，而非仅手动解码。手动解码无法验证签名有效性，线上环境可能因签名验证失败导致登录失败。
• 核对Vercel后端环境变量中的GOOGLE_CLIENT_ID与本地一致，确保Vercel项目设置中已正确配置该变量（本地.env不会自动同步到Vercel）。

3. Axios请求路径问题 #

• 代码中使用的相对路径/api/v1/auth/google在Vercel部署时，若前端与后端域名分离，会导致请求指向前端域名而非后端API。需改为绝对URL，例如：

  const res = await axios.post(`https://your-backend-domain.com/api/v1/auth/google`, { user })
  

• 通过浏览器控制台Network面板查看请求实际地址，确认是否指向正确的后端服务。

4. CORS配置不完整 #

• 后端CORS需允许Vercel生产及预览域名的请求。以Express为例，动态配置origin：

  const allowedOrigins = ['https://your-vercel-domain.com', 'https://*.vercel.app'];
  app.use(cors({
    origin: (origin, callback) => {
      if (!origin || allowedOrigins.includes(origin)) {
        callback(null, true);
      } else {
        callback(new Error('Not allowed by CORS'));
      }
    }
  }));
  

5. GoogleLogin组件配置问题 #

• 确保GoogleOAuthProvider的clientId从环境变量读取，而非硬编码：

  <GoogleOAuthProvider clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}>
  

• 查看浏览器控制台的onError回调日志，Google会返回具体错误码（如invalid_client、redirect_uri_mismatch），可针对性排查。

调试步骤 #

1. 打开Vercel线上应用的浏览器控制台，查看Network请求的响应内容，确认Google授权请求及后端API请求的错误信息。
2. 查看后端服务日志（Vercel部署的后端可在「函数日志」中查看），检查/api/v1/auth/google接口的请求接收及验证流程是否异常。

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