Google Maps API: The requested resource is missing the 'Access-Control-Allow-Origin' header

Question

I saw a lot of people asking this question, but none of the answers worked for me.

I'm trying to call the Google Maps API using React/Axios.

This is my get request:

componentDidMount() {
  axios({
   method: 'get',
   url: `http://maps.googleapis.com/maps/api/js?key=${key}/`,
   headers: {
     "Access-Control-Allow-Origin": '*'
     "Access-Control-Allow-Methods": 'GET',
   },
  })
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });
}

This is the error message:

XMLHttpRequest cannot load http://maps.googleapis.com/maps/api/js?
key=xxxxxxxxx/. Response to preflight request failed access control check: There is no 'Access-Control-Allow-Origin' header on the requested resource. Therefore, access from 'http://localhost:3000' is denied. 

I read the article about CORS that others pointed to https://www.html5rocks.com/en/tutorials/cors/

But I can't find the answer to my problem there.

Answer 1

https://maps.googleapis.com/maps/api Fetch requests from web applications in front-end JavaScript are not supported, the way your code is trying to use it.

Instead, you must use the supported Google Maps JavaScript API, whose client code is different from what you are trying to do. An example of a distance matrix service is as follows:

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

Here is an example of using the Place Autocomplete API Using the Places library :

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

Using the Maps JavaScript API like this - by loading the library using the

Google intentionally does not allow access to the Google Maps API by sending requests via other libraries such as axios or AJAX methods or directly using the XHR or Fetch API.