Google OAuth2+react-google-login获取refresh_token出现redirect_uri_mismatch错误问询

你遇到的redirect_uri_mismatch错误核心是前后端请求时使用的redirect_uri值不匹配：
react-google-login在弹窗授权模式+responseType="code"配置下，发起Google授权请求时会自动将redirect_uri参数设为postmessage，和你后端自行填写的http://localhost:3000/不一致，Google校验不通过就会抛出该错误。

• 首先确认前端授权请求的实际redirect_uri值：打开浏览器控制台网络面板，过滤oauth2/v2/auth请求，查看请求参数中的redirect_uri字段，绝大多数场景下该值为postmessage
• 修改后端GetRefreshToken方法中提交的redirect_uri参数，改为和前端完全一致的值，确认是postmessage就直接填该字符串即可，不需要添加任何域名前缀或路径后缀
• 如果修改后仍报错，检查两个配置细节：
  • 确认Google Cloud后台对应项目的「已授权的JavaScript源」列表中，已添加你当前使用的前端地址（包含http://localhost:3000），不需要在「已授权的重定向URI」列表中添加postmessage
  • 确认你在前端登录组件中配置的accessType="offline"和prompt="consent"参数未被覆盖，你当前给出的配置是正确的，调整redirect_uri后就能正常拿到refresh_token

你当前获取token的代码中，JSON.parse(response.data)是冗余操作：axios会自动解析响应的JSON数据，直接使用response.data即可，多余的解析操作可能会触发语法错误。

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