Google OAuth JS代码报redirect_uri_mismatch错误求助

错误信息 #

{
  "error": "redirect_uri_mismatch",
  "error_description": "Bad Request"
}

问题场景 #

使用Google OAuth JS代码实现授权时触发上述错误，已确认Google控制台中OAuth Web客户端的redirect_uri配置为http://localhost:8080/google_auth/，代码中.env变量引用也无明显错误，但问题仍存在。

相关代码 #

connectToYouTube 函数 #

async function connectToYouTube() {
   console.log('connect to youtube, clientId: ' + user_store.get_clientId);
   try {
      googleSdkLoaded(google => {
      google.accounts.oauth2
         .initCodeClient({
         client_id: user_store.get_clientId,
         scope: 'email profile openid',
         redirect_uri: import.meta.env.VITE_APP_REDIRECT_URL,
         callback: response => {
            if (response.code)
               fetchUserDataFrom(response.code)
               console.log('connect to youtube, clientId: ' + user_store.get_userData);
         },
         })
         .requestCode()

   })
        // Fetch YouTube subscribed channels
   } catch (error) {
      console.error('Error signing in with Google', error);
   }
}

fetchUserDataFrom 函数 #

const fetchUserDataFrom = async (code) => {
      try {
        localStorage.setItem('gCode', JSON.stringify(code))

        console.log('Google connect, redirect_uri: ' + import.meta.env.VITE_APP_REDIRECT_URL, 'code: ' + code, 'clientId: ' + clientId.value, 'clientSecret: ' + clientSecret.value);
  
        const { data } = await axios.post(
          'https://oauth2.googleapis.com/token',
          {
            code,
            client_id: clientId.value,
            client_secret: clientSecret.value,
            redirect_uri: import.meta.env.VITE_APP_REDIRECT_URL,
            grant_type: 'authorization_code',
          },
        )
  
        if (data) {
          const accessToken = data.access_token
  
          // Fetch user details using the access token
          const userObj = await this.axios.get(
            'https://www.googleapis.com/oauth2/v3/userinfo',
            {
              headers: {
                Authorization: `Bearer ${accessToken}`,
              },
            },
          )
  
          if (userObj && userObj.data) {
            // save copy in storage
            localStorage.setItem('user', JSON.stringify(userObj.data))
            userData.value = userObj.data
          }
          else {
            // Handle the case where userResponse or userResponse.data is undefined
            console.error('Failed to fetch user data')
          }
        }
      }
      catch (e) {
        console.error('Failed to exchaange token', e)
      }
    }

排查思路与解决办法 #

• 严格校验redirect_uri的完全匹配：Google对redirect_uri的校验是精确匹配，包括结尾斜杠、大小写、端口号等。确认控制台配置、initCodeClient中的值、fetchUserDataFrom中token请求的redirect_uri三者完全一致，比如控制台是http://localhost:8080/google_auth/，代码里不能少结尾的斜杠。
• 确认.env变量的实际输出值：在控制台打印import.meta.env.VITE_APP_REDIRECT_URL，检查是否存在拼写错误、额外空格或换行符，确保变量值和预期完全一致。
• 核对客户端类型：确保在Google控制台中配置的是Web应用类型的客户端ID，而非Android、iOS等其他类型客户端，不同类型客户端的redirect_uri配置区域独立，选错客户端会导致配置不生效。
• 检查client_id的一致性：确认connectToYouTube中user_store.get_clientId和fetchUserDataFrom中clientId.value是同一个客户端ID，混用不同ID会触发redirect_uri校验失败。
• 清除浏览器缓存与OAuth会话：旧的缓存会话可能导致校验异常，清除浏览器缓存和相关Cookie后重新测试。
• 确认本地服务端口：确保本地开发服务确实运行在8080端口，若端口被占用自动切换，会导致实际访问地址与redirect_uri不匹配。

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