API Google Maps : il manque l'en-tête "Access-Control-Allow-Origin" à la ressource demandée

Question

J'ai vu beaucoup de gens poser cette question, mais aucune des réponses n'a fonctionné pour moi.

J'essaie d'appeler l'API Google Maps à l'aide de React/Axios.

Voici ma demande d'obtention :

componentDidMount() {
  axios({
   méthode : 'obtenir',
   URL : `http://maps.googleapis.com/maps/api/js?key=${key}/`,
   en-têtes : {
     "Contrôle d'accès-Autoriser-Origine": '*'
     "Access-Control-Allow-Methods": 'GET',
   },
  })
 .then(fonction (réponse) {
  console.log(réponse);
 })
 .catch(fonction (erreur) {
  console.log(erreur);
 });
}
Voici le message d'erreur : 
XMLHttpRequest ne peut pas charger http://maps.googleapis.com/maps/api/js ?
key=xxxxxxxxx/. La réponse à l'échec de la vérification du contrôle d'accès de la demande de contrôle en amont : il n'y a pas d'en-tête « Access-Control-Allow-Origin » sur la ressource demandée. Par conséquent, l'accès depuis « http://localhost:3000 » est refusé. ≪/pré>
J'ai lu l'article sur CORS que d'autres ont souligné
https://www.html5rocks.com/en/tutorials/cors/
Mais je n’y trouve pas de réponse à mon problème. 
            

Answer 1

https://maps.googleapis.com/maps/api Les requêtes de récupération des applications Web en JavaScript front-end ne sont pas prises en charge, de la même manière que votre code essaie de l'utiliser.

Au lieu de cela, vous devez utiliser l'API JavaScript Google Maps prise en charge, dont le code client est différent de ce que vous essayez de faire. Un exemple de service matriciel de distanceest le suivant :

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

Voici un exemple d'utilisation de l'API Place Autocomplete en utilisant la bibliothèque 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>

Utiliser l'API Maps JavaScript comme ceci - en chargeant la bibliothèque à l'aide de l'élément

Google n'autorise intentionnellement pas l'accès à l'API Google Maps en envoyant des requêtes via d'autres bibliothèques comme les méthodes axios ou AJAX ou en utilisant directement l'API XHR ou Fetch.