API de Google Maps: no hay ningún encabezado 'Access-Control-Allow-Origin' en el recurso solicitado
He visto esta pregunta formulada por varias personas, ninguna de las respuestas me ha funcionado.
Estoy intentando realizar una llamada API a la API de Google Maps con reaccionar/axios.
Esta es mi solicitud de obtención:
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);
});
}
Este es el mensaje de error:
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.
He leído el artículo sobre CORS que todos los demás señalan https://www.html5rocks.com/en/tutorials/cors/
pero no puedo encontrar una respuesta a mi problema allí.
https://maps.googleapis.com/maps/apino admite la recepción de solicitudes de JavaScript frontend que se ejecutan en aplicaciones web en la forma en que su código intenta usarlo.
En su lugar, debe utilizar la API JavaScript de Google Maps compatible , cuyo código del lado del cliente es diferente del que está probando. Un ejemplo del servicio Distance Matrix se parece más a:
<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>
Y aquí hay un ejemplo de cómo usar la API de autocompletar de Places usando la biblioteca de 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>
Usar la API de JavaScript de Maps de esa manera (a través de un scriptelemento para cargar la biblioteca y luego usar este google.maps.Mapy otros google.maps.*métodos) es la única forma admitida de realizar solicitudes a la API de Google Maps desde el código JavaScript de la interfaz que ejecuta un navegador.
Google intencionalmente no permite el acceso a la API de Google Maps mediante solicitudes enviadas con métodos axios o AJAX en otras bibliotecas similares, ni directamente con XHR o la API Fetch.
