suchen

Heim  >  Fragen und Antworten  >  Hauptteil

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

<p>Ich habe viele Leute gesehen, die diese Frage gestellt haben, aber keine der Antworten hat für mich funktioniert. </p> <p>Ich versuche, die Google Maps API mit React/Axios aufzurufen. </p> <p>Das ist meine Get-Anfrage: </p> <pre class="brush:php;toolbar:false;">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); }); }</pre> <p>Dies ist die Fehlermeldung: </p> <pre class="brush:php;toolbar:false;">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. </pre> <p>Ich habe den Artikel über CORS gelesen, auf den andere hingewiesen haben https://www.html5rocks.com/en/tutorials/cors/</p> <p>Aber ich kann dort keine Antwort auf mein Problem finden. </p>
P粉993712159P粉993712159542 Tage vor490

Antworte allen(1)Ich werde antworten

  • P粉384244473

    P粉3842444732023-08-23 20:45:44

    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-通过使用