Google Maps API: Der angeforderten Ressource fehlt der Header „Access-Control-Allow-Origin'.

Question

Ich habe viele Leute gesehen, die diese Frage gestellt haben, aber keine der Antworten hat für mich funktioniert.

Ich versuche, die Google Maps API mit React/Axios aufzurufen.

Das ist meine Get-Anfrage:

componentDidMount() {
  Axios({
   Methode: 'get',
   URL: „http://maps.googleapis.com/maps/api/js?key=${key}/“,
   Überschriften: {
     "Access-Control-Allow-Origin": '*'
     "Access-Control-Allow-Methods": 'GET',
   },
  })
 .then(Funktion (Antwort) {
  console.log(response);
 })
 .catch(Funktion (Fehler) {
  console.log(error);
 });
}

Dies ist die Fehlermeldung:

XMLHttpRequest kann http://maps.googleapis.com/maps/api/js nicht laden?
key=xxxxxxxxx/. Antwort auf die Preflight-Anfrage fehlgeschlagene Zugriffskontrollprüfung: Es gibt keinen „Access-Control-Allow-Origin“-Header auf der angeforderten Ressource. Daher wird der Zugriff von „http://localhost:3000“ verweigert. 

Ich habe den Artikel über CORS gelesen, auf den andere hingewiesen haben https://www.html5rocks.com/en/tutorials/cors/

Aber ich kann dort keine Antwort auf mein Problem finden.

Answer 1

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

相反，您必须使用支持的Google Maps JavaScript API，其客户端代码与您尝试的方式不同。一个距离矩阵服务示例如下：

<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>

这里是使用Place Autocomplete API的示例使用Places库：

<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>

像这样使用Maps JavaScript API-通过使用

Google故意不允许通过axios或AJAX方法等其他库发送请求或直接使用XHR或Fetch API访问Google Maps API。