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

Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！

À propos de nousClause de non-responsabilitéSitemap

© php.cn All rights reserved