React项目使用react-google-maps出现Google Geocode API密钥授权错误

问题根因 #

你当前的报错是API密钥限制类型和使用场景不匹配导致的：IP地址限制仅适用于服务端调用Google Maps API的场景，而你是在React前端项目中通过浏览器调用API，该场景下IP限制不会生效。

解决方案 #

1. 调整API密钥限制类型
   进入Google Cloud控制台的API密钥管理页，将密钥的应用限制从「IP地址」改为「HTTP 引荐来源网址（引用来源）」。
2. 配置本地开发允许地址
   在允许的引用来源列表中添加http://localhost:3000/*，通配符*可匹配该地址下的所有子路径，匹配你当前本地运行的项目地址。
3. 校验API启用状态
   确认Google Cloud控制台中已为该密钥开启你用到的两类API权限：Geocoding API、Maps JavaScript API，两类API缺一不可。
4. 校验密钥填写正确性
   检查代码中密钥配置行Geocode.setApiKey('你的密钥')，确认填入的密钥和控制台生成的完全一致，无多余空格或字符遗漏。

后续线上部署注意事项 #

项目上线后，将你的线上域名按规则添加到引用来源允许列表即可，比如线上地址为https://example.com，则添加https://example.com/*到列表。

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