cari

Rumah  >  Soal Jawab  >  teks badan

API Peta Google: Sumber yang diminta tiada pengepala 'Access-Control-Allow-Origin'

<p>Saya melihat ramai orang bertanya soalan ini, tetapi tiada jawapan yang berkesan untuk saya. </p> <p>Saya cuba memanggil API Peta Google menggunakan React/Axios. </p> <p>Ini adalah permintaan saya: </p> <pre class="brush:php;toolbar:false;">componentDidMount() { aksios({ kaedah: 'dapat', url: `http://maps.googleapis.com/maps/api/js?key=${key}/`, tajuk: { "Access-Control-Allow-Origin": '*' "Access-Control-Allow-Methods": 'GET', }, }) .then(fungsi (tindak balas) { console.log(respon); }) .catch(fungsi (ralat) { console.log(error); }); }</pre> <p>Ini ialah mesej ralat: </p> <pre class="brush:php;toolbar:false;">XMLHttpRequest tidak boleh memuatkan http://maps.googleapis.com/maps/api/js? key=xxxxxxxxx/. Respons kepada permintaan prapenerbangan gagal semakan kawalan akses: Tiada pengepala 'Access-Control-Allow-Origin' pada sumber yang diminta. Oleh itu, akses daripada 'http://localhost:3000' dinafikan. </pra> <p>Saya membaca artikel tentang CORS yang ditunjuk oleh orang lain https://www.html5rocks.com/en/tutorials/cors/</p> <p>Tetapi saya tidak dapat mencari jawapan kepada masalah saya di sana. </p>
P粉993712159P粉993712159571 hari yang lalu530

membalas semua(1)saya akan balas

  • P粉384244473

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

    https://maps.googleapis.com/maps/api Ambil permintaan daripada aplikasi web dalam JavaScript bahagian hadapan tidak disokong, cara kod anda cuba menggunakannya.

    Sebaliknya, anda mesti menggunakan Google Maps JavaScript API yang disokong, yang kod pelanggannya berbeza daripada apa yang anda cuba lakukan. Contoh perkhidmatan jarak matriksadalah seperti berikut:

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

    Berikut ialah contoh penggunaan Place Autocomplete API menggunakan perpustakaan 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>
    

    Menggunakan API JavaScript Peta seperti ini - dengan memuatkan perpustakaan menggunakan elemen