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

Question

Saya melihat ramai orang bertanya soalan ini, tetapi tiada jawapan yang berkesan untuk saya.

Saya cuba memanggil API Peta Google menggunakan React/Axios.

Ini adalah permintaan saya:

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);
 });
}

Ini ialah mesej ralat:

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. 
Saya membaca artikel tentang CORS yang ditunjuk oleh orang lain
https://www.html5rocks.com/en/tutorials/cors/
Tetapi saya tidak dapat mencari jawapan kepada masalah saya di sana. 
            

Answer 1

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

Google sengaja tidak membenarkan akses kepada API Peta Google dengan menghantar permintaan melalui perpustakaan lain seperti kaedah axios atau AJAX atau menggunakan XHR atau Fetch API secara langsung.