React中调用谷歌Place Autocomplete Address API出现CORS Policy错误

• API密钥配置无效：密钥未启用Places API权限、设置的域名/IP限制与实际运行环境不匹配、谷歌云账户未绑定计费方式或欠费，都会导致API调用被拒绝
• SDK加载配置错误：引入谷歌地图JS SDK时未添加libraries=places参数，默认加载的SDK不包含地址自动补全相关能力；或SDK未完成加载就提前调用API方法，此时全局google对象未挂载
• 项目安全规则拦截：React项目配置的内容安全策略（CSP）未放行谷歌API相关域名，导致脚本加载、接口调用被浏览器拦截
• 跨域规则限制：直接在前端调用谷歌Places HTTP接口，未使用官方JS SDK，触发浏览器跨域限制

1. 修复API密钥配置

• 登录谷歌云控制台，进入「API和服务」-「已启用的API和服务」，确认已启用Places API
• 进入凭据页面查看当前使用的密钥，根据运行环境配置限制规则：如果是HTTP referer限制，需要把本地开发地址（如http://localhost:3000/*）和线上域名都加入允许列表；如果是IP限制，需要添加当前访问设备的公网IP
• 确认谷歌云账户已绑定有效支付方式，且无欠费记录，谷歌地图类API需开通计费才可正常调用，免费额度内不会产生实际费用

2. 修正SDK加载逻辑

• 引入JS SDK时必须携带places库参数，标准引入格式如下：

<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=places" async defer></script>

• 如果使用@react-google-maps/api等React封装库，需要等待SDK加载完成后再执行API调用逻辑，示例代码如下：

import { useJsApiLoader, Autocomplete } from '@react-google-maps/api';

const AddressInput = () => {
  const { isLoaded } = useJsApiLoader({
    googleMapsApiKey: "你的API密钥",
    libraries: ['places']
  });

  // 未加载完成前返回占位内容，避免调用未定义方法报错
  if (!isLoaded) return <div>加载中</div>;

  return <Autocomplete onPlaceChanged={() => {/* 处理地址选择逻辑 */}}>
    <input type="text" placeholder="输入地址" />
  </Autocomplete>
}

3. 调整安全策略规则

• 如果项目配置了CSP规则，需要在对应配置项中添加谷歌相关域名白名单：
  • script-src 新增 https://maps.googleapis.com
  • connect-src 新增 https://maps.googleapis.com https://maps.gstatic.com

4. 规避跨域问题

• 禁止直接在前端调用谷歌Places HTTP接口，必须使用官方提供的JS SDK发起请求；若需要服务端调用，可在自身后端服务做一层代理转发，前端请求自有后端接口即可

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