API di Google Maps: nessuna intestazione ‘Access-Control-Allow-Origin’ è presente sulla risorsa richiesta

Ho visto questa domanda fatta da più persone, nessuna delle risposte ha funzionato per me.

Sto cercando di effettuare una chiamata API all’API di google maps con react / axios.

Questa è la mia richiesta di ottenere:

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

Questo è il messaggio di errore:

 XMLHttpRequest cannot load http://maps.googleapis.com/maps/api/js? key=xxxxxxxxx/. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. 

Ho letto l’articolo con CORS che tutti gli altri puntano a https://www.html5rocks.com/en/tutorials/cors/

ma non riesco a trovare una risposta al mio problema lì.

https://maps.googleapis.com/maps/api non supporta l’acquisizione di richieste da JavaScript frontend in esecuzione nelle app Web nel modo in cui il codice sta tentando di utilizzarlo.

Devi invece utilizzare l’ API JavaScript di Google Maps supportata, il cui codice lato client è diverso da quello che stai provando. Un esempio per il servizio Distance Matrix è più simile a questo:

   

Ed ecco un esempio per l’utilizzo dell’API di completamento automatico tramite la libreria Luoghi :

   

L’utilizzo dell’API JavaScript di Maps in questo modo, tramite un elemento di script per caricare la libreria e quindi utilizzando google.maps.Map e altri google.maps.* Metodi, è l’unico modo supportato per effettuare richieste all’API di Google Maps dal codice JavaScript di frontend che esegue un browser.

Google non consente intenzionalmente l’accesso all’API di Google Maps tramite richieste inviate con metodi axios o AJAX in altre librerie di questo tipo, né direttamente con XHR o l’API Fetch.