json: cómo utilizar CORS para implementar la solicitud de API de JavaScript de Google Places
Realmente NO entiendo cómo se supone que debo hacer que esto funcione:
var requestURL = 'https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJN1t_tDeuEmsRUsoyG83frY4&key=AIzaSyAW4CQp3KxwYkrHFZERfcGSl--rFce4tNw';
console.log(requestURL);
$.getJSON( requestURL, function( data ) {
// data
console.log(data);
});
y mi archivo HTML:
<body>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script src="https://stackoverflow.com/questions/66842869/main.js" charset="utf-8"></script>
</body>
Siempre aparece el encabezado No 'Access-Control-Allow-Origin' en el recurso solicitado. mensaje... aunque si voy a https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJN1t_tDeuEmsRUsoyG83frY4&key=AIzaSyAW4CQp3KxwYkrHFZERfcGSl--rFce4tNw en mi navegador obtengo el JSON adecuado.
Me hacen creer que CORS puede ayudarme aquí. No entiendo CORS. Por favor, ¿alguien puede ayudarme en términos sencillos? ¿Qué debo cambiar para que esto funcione?
Gracias
Lo primero que debe hacer es comprobar si Google Places es compatible con CORS. Si no, no tiene sentido. Supongo que solo admiten JSONP, pero consulte la documentación.
- Kevin Christopher Henry11/02/2017 a las 20:36
Lo hace, pero soy demasiado tonto para encontrarle sentido a:developers.google.com/api-client-library/javascript/features/…
- Ryan Mc11/02/2017 a las 20:41
2
No estoy seguro de por qué se marcó como duplicado. Claramente no lo es.
-vhs11/06/2017 a las 6:05
Si viniste aquí, probablemente deberías leer sobre CORS. Para resolver su error específico con la API de Google Places, lea la respuesta a continuación:
- Jonas Wilms23/04/2019 a las 7:42
------------------------------------
Estás intentando utilizar el servicio web API de Google Places en el lado del cliente, mientras que está diseñado para aplicaciones del lado del servidor. Probablemente esa sea la razón por la que el servidor no establece encabezados de respuesta CORS apropiados.
Como se explica en las Notas al principio de la documentación de Detalles del lugar, debes utilizar la Biblioteca de lugares en la API de JavaScript de Google Maps:
Si estás creando una aplicación del lado del cliente, echa un vistazo a la API de Google Places para Android, a la API de Google Places para iOS y a la biblioteca de Places en la API de JavaScript de Google Maps.
Nota: primero deberá habilitar la API de JavaScript de Google Maps en su Consola de desarrollador de Google.
Esta es una forma de proceder para obtener detalles del lugar (basado en el ejemplo de la documentación).norte):
<head>
<script type="text/javascript">
function logPlaceDetails() {
var service = new google.maps.places.PlacesService(document.getElementById('map'));
service.getDetails({
placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'
}, function (place, status) {
console.log('Place details:', place);
});
}
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAW4CQp3KxwYkrHFZERfcGSl--rFce4tNw&libraries=places&callback=logPlaceDetails"></script>
</head>
<body>
<div id="map"></div>
</body>
4
1
Esto parece bueno, pero hay algunas cosas: 1) Estás usando ES6 (todavía no entiendo ES6), 2) no funciona para mí, 3) No quiero un mapa, solo quiero devolver el objeto del lugar para poder generar los datos de la forma que elija. Gracias por tu ayuda
- Ryan Mc12/02/2017 a las 9:19
1) Acabo de reemplazar const por var y (lugar, estado) => por función (lugar, estado) por lo que no hay más ES6, 2) ¿Puedes dar más detalles? ¿Tienes algún error en la consola? 3) No soy un experto en Google Maps, pero parece que puedes proporcionar un nodo Dom en lugar de una instancia de mapa al PlacesService, por lo que no se representa ningún mapa. Probé y actualicé el código en consecuencia
- rd3n12/02/2017 a las 10:46
Finalmente logré que esto funcionara modificando el ejemplo en la documentación de Google. Gracias, tu respuesta me indicó la dirección correcta.
- Ryan Mc12/02/2017 a las 11:23
9
@RyanMc dado que la respuesta de rd3n no respondió a tu pregunta, ¿puedes publicar tu código modificado como respuesta? Estoy interesado en ver lo que hiciste.
- rmutalik11/03/2019 a las 23:47
------------------------------------
@rd3n ya respondió sobre por qué usar el SDK de Google Maps, pero si realmente necesita usar la API en lugar del SDK en una aplicación web (reutilice el código, paraPor ejemplo), puede omitir CORS utilizando el parámetro proxy del DevServer de Webpack.
const GMAPS_PLACES_AUTOCOMPLETE_URL = (
process.env.NODE_ENV === 'production'
? 'https://maps.googleapis.com/maps/api/place/autocomplete/json'
: 'place-api' // on development, we'll use the Webpack's dev server to redirect the request
const urlParams = new URLSearchParams([
...
])
const response = await fetch(
`${GMAPS_PLACES_AUTOCOMPLETE_URL}?${urlParams}`,
{ method: 'GET' }
)
Y en tu webpack.config.js...
module.exports = {
devServer: {
proxy: {
'/place-api': {
target: 'https://maps.googleapis.com/maps/api/place/autocomplete/json',
changeOrigin: true,
pathRewrite: { '^/place-api': '' }
}
}
}
}
1
5
pero, ¿cómo se hace que esto funcione en producción? La seguridad de cors también está aquí
- Sébastien Lorber23/04/2020 a las 10:05
------------------------------------
Sé que esta es una vieja pregunta y esta miPuede que no sea una respuesta directa a esta pregunta, pero en caso de que alguien pueda usar este truco, siempre me gusta solucionar este problema usando PHP para crear mi propia API y luego recuperar la API recién creada usando JavaScript:
1# Crea un archivo api.php:
<?php
$google_URL = 'https://maps.googleapis.com/maps/api/place/details/json';
$api = 'YOUR_GOOGLE_API';
$place = 'PLACE_ID';
$field = [
'user_ratings_total',
'rating'
];
$fields = join(",", $field);
$result_url = $google_URL.'?placeid='.$place.'&fields='.$fields.'&key='.$api;
$result_content = file_get_contents($result_url);
$json_data = json_decode($result_content, true);
if ( isset($json_data) && $json_data['status'] === 'OK' ) {
echo json_encode($json_data['result']);
}else {
echo json_encode($json_data['error_message']);
}
header("content-type: application/json");
2# Crea un archivo script.js:
const url = './api.php';
fetch(url)
.then(res => res.json())
.then(data => console.log(data))
.catch(error => console.log(error))
------------------------------------
Utilizando la misma URL que proporcionaste, esto es solo para front-end (React), pero es una solución menos segura:
var requestURL = 'https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJN1t_tDeuEmsRUsoyG83frY4&key=AIzaSyAW4CQp3KxwYkrHFZERfcGSl--rFce4tNw';
Recorta lo siguiente de la URL: 'https://maps.googleapis.com/maps/api/place' y crea una línea proxy en tu paquete.json:
"proxy": "https://maps.googleapis.com/maps/api/place"
Luego siguiendo la documentación de Googleciones, te quedará el siguiente código (dondequiera que obtengas la API):
var axios = require('axios');
var config = {
method: 'get',
url: '/details/json?placeid=ChIJN1t_tDeuEmsRUsoyG83frY4&key=AIzaSyAW4CQp3KxwYkrHFZERfcGSl--rFce4tNw', //the rest of your url
secure: false //important
};
axios(config)
.then(function (response) {
console.log(JSON.stringify(response.data));
})
.catch(function (error) {
console.log(error);
});