MERN集成@react-oauth/google遇400错误，求排查解决

点击Google登录按钮并选择账号后，前端控制台出现400 Bad Request错误及AxiosError。服务器日志确认已接收到前端传来的googleAccessToken，但调用Google用户信息接口时失败。

已尝试以下操作但未解决：

• 启用请求头中Authorization: Bearer ${googleAccessToken}配置
• 更换Google用户信息接口URL为v1和v3版本
• 在Google控制台添加所有localhost授权来源

前端相关代码 #

import { useGoogleLogin } from '@react-oauth/google';

const SignUpForm = () => {
  const navigate = useNavigate();
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [error, setError] = useState("");

  const { setAdminId } = useContext(AdminContext);
 
  const handleSubmit = async (e) => {
    /* 普通表单提交逻辑 */
  };

  return (
    <>
     
      <Container fluid fill>
        <div className="container-wrapper align-items-center">
          <div className="signup-wrapper">
            <Form className="FormContainer">
       
               
             {/* 普通表单输入字段 */}
               
      
              <Button
                className="fullwidth"
                variant="primary"
                onClick={handleSubmit}
              >
                Sign Up !
              </Button>
              or
            </Form>
{/* react-oauth/google GoogleLogin部分 */}
 
          <GoogleLogin
           onSuccess={credentialResponse => {
           let accessToken = credentialResponse.credential
     
            try{
               axios.post(`${apiUrl}/admins/google-register`, {
             googleAccessToken:accessToken
            });
           }
           catch(error){
             console.log("We are facing this error: " + error)
           }
        }}
          onError={() => {
        console.log('Login Failed');
         }}

/* GoogleLogin结束 */


          />
          </div>
        </div>
      </Container>
    </>
  );
};

export default SignUpForm;

后端路由代码 #

//Google register
router.post("/google-register", async (req, res) => {

  if (req.body.googleAccessToken) {
    const {googleAccessToken} = req.body;
   console.log("I am here and got the token right: " + googleAccessToken)
    axios
        .get(`https://www.googleapis.com/oauth2/v1/userinfo?alt=json&access_token=${googleAccessToken}`, {
        // headers: {
        //     "Authorization": `Bearer ${googleAccessToken}`
        // }
    })
        .then(async response => {
            const name = response.data.given_name;
            console.log("see if im here in response section")
            // const lastName = response.data.family_name;
            const email = response.data.email;
            // const picture = response.data.picture;

            const existingUser = await Admin.findOne({email})

            if (existingUser) 
                return res.status(400).json({message: "User already exist!"})

            const result = await Admin.create({email, name})

            const token = jwt.sign({
                email: result.email,
                id: result._id
            }, config.get("JWT_SECRET"), {expiresIn: "1h"})

            res
                .status(200)
                .json({result, token})
        })
        .catch(err => {
            res
                .status(400)
                .json({message: "Invalid access token!"})
        })

} else {
  console.log("nothing happens")
}
  
});

恳请各位提供解决思路！

内容的提问来源于stack exchange，提问作者Naveen DINUSHKA