React应用将对话转docx后上传Google Drive时遇403权限错误

你遇到的access_denied + Invalid client for this origin错误，核心是Google OAuth服务判定发起请求的应用来源不在允许范围内，或客户端配置不匹配，以下是针对性排查步骤：

• 校验OAuth客户端类型
  React单页应用必须创建「Web应用」分类下的SPA类型客户端ID，或「桌面应用」类型ID，不能使用服务器端/原生应用类型。客户端类型不匹配时，即使重定向URL正确，也会触发origin校验失败。

• 确保重定向URL完全精确匹配
  Google对重定向URL的校验是严格精确匹配：

  • 必须包含完整协议（http/https）、域名、端口、路径
  • 本地开发时，http://localhost:3000和http://127.0.0.1:3000会被视为不同origin，需按实际访问地址填写
  • 若授权后重定向到特定路径（如/auth/google/callback），需完整填写该路径

• 补充「已授权的JavaScript来源」配置
  针对SPA类型客户端，除了「已授权的重定向URI」，还需在Google Cloud控制台的客户端ID设置中，添加「已授权的JavaScript来源」，将应用的访问域名（如本地的http://localhost:3000）填入。该字段用于限制可发起OAuth请求的域名，未配置会直接触发origin校验错误。

• 清除OAuth会话缓存
  浏览器缓存的旧授权会话可能导致异常：

  1. 清除当前应用域名的Cookie和缓存
  2. 访问Google账号权限管理页面，移除该应用的授权记录，再重新发起授权流程

• 核对gapi初始化的Client ID
  检查代码中初始化gapi时传入的clientId，是否与Google Cloud控制台生成的客户端ID完全一致，避免复制时出现字符遗漏、多空格等错误。

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