Google 地图 API: 请求的资源上没有 'Access-Control-Allow-Origin' header

Question

我看到这个问题被很多人问过，none 个答案对我有用。

我正在尝试使用 react/axios 对 google 地图 api 进行 API 调用。

这是我的获取请求：

componentDidMount() {
  axios({
   method : 'get',
   url : `http://maps.googleapis.com/maps/api/js?key=${key}/`,
   headers: {
     "Access-Control-Allow-Origin": '*'
     "Access-Control-Allow-Methods": 'GET',
   },
  })
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });
}

这是错误消息：

XMLHttpRequest cannot load http://maps.googleapis.com/maps/api/js?
key=xxxxxxxxx/. Response to preflight request doesn't pass access control 
check: No 'Access-Control-Allow-Origin' header is present on the 
requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

我读过其他人都指出的关于 CORS 的文章 https://www.html5rocks.com/en/tutorials/cors/

但我在那里找不到问题的答案。

Answer 1

https://maps.googleapis.com/maps/api 不支持从前端 JavaScript 运行以您的代码尝试使用它的方式获取请求。

相反，您必须使用支持的 Google Maps JavaScript API, the client-side code for which is different from what you’re trying. A sample for the Distance Matrix service 看起来更像：

<script>
  var service = new google.maps.DistanceMatrixService;
  service.getDistanceMatrix({
    origins: [origin1, origin2],
    destinations: [destinationA, destinationB],
    travelMode: 'DRIVING',
    unitSystem: google.maps.UnitSystem.METRIC,
    avoidHighways: false,
    avoidTolls: false
},…
</script>

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

这是使用地点自动完成的示例 API using the Places library:

<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -33.8688, lng: 151.2195},
      zoom: 13
    });
    ...
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindTo('bounds', map);
    var infowindow = new google.maps.InfoWindow();
    var infowindowContent = document.getElementById('infowindow-content');
    infowindow.setContent(infowindowContent);
    var marker = new google.maps.Marker({
      map: map,
      anchorPoint: new google.maps.Point(0, -29)
    });
</script>
<script
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
  async defer></script>

像这样使用地图 JavaScript API——通过 script 元素加载库，然后使用 google.maps.Map 和其他 google.maps.* 方法 - 是从前端 JavaScript 代码运行浏览器向 Google 地图 API 发出请求的唯一支持方式。

Google 有意不允许通过在其他此类库中使用 axios 或 AJAX 方法发送的请求访问 Google 地图 API，也不允许直接访问使用 XHR 或 Fetch API.

Google 地图 API: 请求的资源上没有 'Access-Control-Allow-Origin' header

Google Maps API: No 'Access-Control-Allow-Origin' header is present on the requested resource

google-maps

xmlhttprequest

google-maps-api-3

cors

axios