0
399
ViewsAPI de Google Place: no hay ningún encabezado 'Access-Control-Allow-Origin' en el recurso solicitado. Por lo tanto, no se permite el acceso al origen 'null'
Estoy usando la API de Google Place.
Lo que quiero obtener sugerencia de lugar para ayudar a escribir.
Entonces, lo que he hecho es-
var Google_Places_API_KEY = "AIzaSyAK08OEC-B2kSyWfSdeCzdIkVnT44bcBwM"; //Get it from - https://code.google.com/apis/console/?noredirect#project:647731786600:access var language = "en"; //'en' for English, 'nl' for Nederland's Language var Auto_Complete_Link = "https://maps.googleapis.com/maps/api/place/autocomplete/json?key="+Google_Places_API_KEY+"&types=geocode&language="+language+"&input=Khu"; $.getJSON(Auto_Complete_Link , function(result) { $.each(result, function(i, field) { //$("div").append(field + " "); //alert(i + "=="+ field); console.error(i + "=="+ field); }); });Entonces, en qué enlace estoy solicitando es:
Y si voy a este enlace con el navegador, puedo obtener un resultado como este (intente comprobarlo)-
Pero si pruebo con .getJSON o .ajax de jQuery, mi solicitud se bloquea con este mensaje:
.
Entonces, XMLHTTPRequest está bloqueado debido a:
No hay ningún encabezado 'Access-Control-Allow-Origin' en el recurso solicitado. Por lo tanto, no se permite el acceso al origen 'null'.
Revisé StackOverflow para la solución de este problema y revisé aquí y aquí , pero no puedo obtener mi solución perfectamente.
¿Puede alguien por favor iluminarme?
3 answers
Answer question0
Lo hice funcionar después de encontrar la respuesta de @sideshowbarker aquí:
Y luego usé este enfoque para que funcionara:
const proxyurl = "https://cors-anywhere.herokuapp.com/"; const url = "https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${latitude},${longitude}&radius=500&key=[API KEY]"; // site that doesn't send Access-Control-* fetch(proxyurl + url) // https://cors-anywhere.herokuapp.com/https://example.com .then(response => response.json()) .then(contents => console.log(contents)) .catch(() => console.log("Can't access " + url + " response. Blocked by browser?"))Se puede encontrar más información en la respuesta en el enlace de arriba.
0
Las solicitudes AJAX solo son posibles si el puerto, el protocolo y el dominio del remitente y el receptor son iguales; de lo contrario, podrían conducir a CORS. CORS significa Intercambio de recursos de origen cruzado y debe admitirse en el lado del servidor.
Solución
JSONP
JSONP o "JSON con relleno" es una técnica de comunicación utilizada en programas JavaScript que se ejecutan en navegadores web para solicitar datos de un servidor en un dominio diferente, algo prohibido por los navegadores web típicos debido a la política del mismo origen.
Algo como esto podría ayudarte compañero.. :)
$.ajax({ url: Auto_Complete_Link, type: "GET", dataType: 'jsonp', cache: false, success: function(response){ alert(response); } });0
Google proporciona la biblioteca del cliente API:
<script src="https://apis.google.com/js/api.js" type="text/javascript"></script>Puede hacer solicitudes de API de Google por usted, dada la ruta y los parámetros de la API:
var restRequest = gapi.client.request({ 'path': 'https://people.googleapis.com/v1/people/me/connections', 'params': {'sortOrder': 'LAST_NAME_ASCENDING'} });Dado que la biblioteca se sirve desde el dominio de Google, puede llamar de forma segura a las API de Google sin problemas de CORS.