基于Vue.js的SPA如何在客户端调用Google Place API并解决CORS问题？

别再用axios直接调用REST API啦！Google Maps JavaScript官方库自带的PlacesService就是专门为浏览器端设计的Place查询工具，能完美避开CORS拦截——因为它的请求是通过Google自身的域名发起的，完全符合浏览器同源策略规则。

前提确认 #

既然你已经实现了自动完成和地理编码功能，肯定已经加载了Google Maps JS库，只需要确保加载脚本时包含places库参数即可（如果之前没加，补上就行）：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

具体实现代码（Vue组件内） #

直接用PlacesService的getDetails方法查询Place ID对应的详情，不需要axios，也不用额外npm包：

// 在Vue组件的methods中添加这个方法
getPlaceDetails(placeId) {
  // 创建一个临时DOM元素（PlacesService初始化必须绑定一个元素，哪怕是隐藏的）
  const tempContainer = document.createElement('div');
  const placesService = new google.maps.places.PlacesService(tempContainer);

  // 配置查询参数：必须显式指定需要返回的字段（Google API强制要求）
  const requestConfig = {
    placeId: placeId,
    fields: ['name', 'formatted_address', 'geometry', 'rating', 'website'] // 按需选择字段
  };

  placesService.getDetails(requestConfig, (placeResult, status) => {
    // 用完临时元素及时销毁，避免内存泄漏
    tempContainer.remove();

    if (status === google.maps.places.PlacesServiceStatus.OK) {
      // 成功获取详情，处理数据
      console.log('Place详情:', placeResult);
      this.placeInfo = placeResult; // 将结果赋值给Vue的data属性
    } else {
      console.error('查询失败:', status);
      // 这里可以添加用户友好的错误提示
    }
  });
}

关键细节说明 #

1. 为什么能避开CORS？
   官方JS库的请求是通过Google的代理机制发起的，并非从你的SPA域名直接请求Google API，所以浏览器不会触发跨域拦截。
2. fields参数不能省略
   现在Google Places API强制要求显式声明需要返回的字段，不指定会直接返回错误。你可以根据需求选择，比如geometry.location（经纬度）、formatted_phone_number（电话）等。
3. 临时DOM元素的作用
   PlacesService初始化时必须绑定一个DOM元素，哪怕这个元素永远不会显示在页面上——用临时创建的div就足够，记得用完销毁避免内存浪费。

和现有功能的结合 #

既然你已经实现了自动完成功能，其实自动完成返回的place对象里已经包含place_id，可以直接把这个ID传给上面的方法，快速获取完整详情：

// 假设这是你的自动完成选中事件处理函数
onPlaceSelected(place) {
  const targetPlaceId = place.place_id;
  this.getPlaceDetails(targetPlaceId);
}

内容的提问来源于stack exchange，提问作者Just A Guy