React前端调用Google Cloud Vision API报auth实例缺失错误求助

1. 你使用的@google-cloud/vision是官方针对Node.js服务端环境开发的SDK，本身不支持浏览器等非Node.js运行环境。SDK内部默认的服务账号认证逻辑依赖Node.js的系统环境变量、文件系统读取能力，浏览器环境根本没有这些能力，你本地设置的GOOGLE_APPLICATION_CREDENTIALS环境变量只有本地gcloud命令、Node进程能读取，前端代码完全无法访问。
2. 服务账号密钥属于敏感凭证，本身就不允许在前端暴露，一旦泄露所有人都可以调用你的Google云资源产生费用，官方SDK也不会支持在前端直接使用服务账号认证的逻辑。

推荐使用后端中转的方案，这是最安全也最符合官方规范的实现方式：

• 自行开发后端接口，支持接收前端上传的图片数据
• 后端使用@google-cloud/visionSDK，在服务端配置GOOGLE_APPLICATION_CREDENTIALS环境变量完成认证，调用Vision API完成文本识别
• 后端将识别结果返回给前端展示

如果你确实需要直接在前端调用API，可使用REST接口适配前端OAuth认证的方式实现：

• 前往Google Cloud控制台创建浏览器端可用的OAuth 2.0客户端ID，配置好你的前端域名白名单
• 引入google-auth-library的浏览器端版本，引导用户完成Google账号OAuth授权，获取访问令牌
• 不要使用@google-cloud/visionSDK，直接向Vision API的REST端点发送POST请求，请求头携带Authorization: Bearer 你的访问令牌，请求体传入图片base64编码和检测规则即可

注意：绝对不要将服务账号密钥文件明文放在前端代码、静态资源或代码仓库中，会导致严重的安全风险。

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