使用@react-oauth/google时遇401错误，请求协助排查授权码流程问题

先梳理你的代码问题和核心排查方向：

1. 修正前端代码的语法与参数命名错误 #

你的axios.post调用存在语法问题，且参数命名易导致后端识别错误：

const googleLogin = useGoogleLogin({            
    flow: 'auth-code',                              
    onSuccess: async (codeResponse) => { 
      // 修正：URL与请求体之间添加逗号
      const response = await axios.post(              
        'my backend api ',
        {
          // 关键：授权码不是accessToken，后端需要的是code字段，避免混淆
          code: codeResponse.code,  
          oAuthAgency: 2,
        }
      );
      console.log(codeResponse);
    },
    onError: (errorResponse) => console.log(errorResponse),
  });

2. 检查Google OAuth客户端配置 #

• 确认Google Cloud控制台的OAuth 2.0客户端ID中，授权回调URL与前端域名完全匹配（包含http/https、端口、路径）
• 确保GoogleOAuthProvider组件已正确传入对应项目的clientId
• 检查项目是否启用了Google Identity API（Cloud控制台API库中搜索启用）

3. 后端验证逻辑排查 #

• 后端需用前端传递的code，结合客户端ID、客户端密钥、回调URL，向Google token端点请求换取access token，任一参数错误都会返回401
• 确认后端使用的客户端密钥与前端客户端ID属于同一个Google Cloud项目
• 检查后端是否正确解析前端传递的code字段，而非错误识别为access token

4. 其他常见问题 #

• 授权码仅能使用一次，重复发送同一code会触发401，测试时需重新触发登录获取新code
• 确认授权码在10分钟有效期内发送给后端，超时也会导致验证失败
• 后端需配置允许前端域名的CORS规则，避免预请求失败引发的401

内容的提问来源于stack exchange，提问作者전성호