web-dev-qa-db-fra.com

API Google Place - Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée. L'origine 'null' n'est donc pas autorisée

J'utilise l'API Google Place.

Ce que je veux obtenir suggestion de lieu pour le type aider.

Donc, ce que j'ai fait est-

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

Donc, dans quel lien je demande est -

https://maps.googleapis.com/maps/api/place/autocomplete/json?key=AIzaSyAK08OEC-B2kSyWfSdeCzdIkVnT44bcBwM&types=geocode&language=en&input=Khu

Et si je vais à ce lien avec le navigateur, je peux obtenir la sortie comme ça (s'il vous plaît essayer de ck) -

11

Mais si j'essaie avec .getJSON ou .ajax de jQuery, ma demande est bloquée par ce message.

222.

SO le XMLHTTPRequest est bloqué à cause de - 

Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée. Origin 'null' n'est donc pas autorisé à accéder.

J'ai vérifié dans StackOverflow pour cette solution de problème et parcourez ici , [ici 4 et ici , mais je ne peux pas obtenir ma solution parfaitement.

Quelqu'un peut-il m'éclairer s'il vous plaît?

javascriptjqueryajaxgoogle-mapsgoogle-places-api
27
Abrar Jahin

Les demandes AJAX ne sont possibles que si le port, le protocole et le domaine de l'expéditeur et du destinataire sont égaux, sinon pourrait conduire à CORS. CORS est synonyme de partage de ressources d'origine croisée et doit être pris en charge côté serveur.

Solution

JSONP

JSONP ou "JSON avec remplissage" est une technique de communication utilisée dans les programmes JavaScript exécutés dans les navigateurs Web pour demander des données à un serveur appartenant à un domaine différent, ce qui est interdit par les navigateurs Web classiques en raison de la même règle d'origine.

Quelque chose comme ça pourrait vous aider, mec .. :)

$.ajax({
            url: Auto_Complete_Link, 
            type: "GET",   
            dataType: 'jsonp',
            cache: false,
            success: function(response){                          
                alert(response);                   
            }           
        });
10
Outlooker

ok, c’est ce que nous faisons en javascript ... google a ses propres fonctions pour cela ....

lien: https://developers.google.com/maps/documentation/javascript/places#place_search_requests

var map;
var service;
var infowindow;

function initialize() {
  var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);

  map = new google.maps.Map(document.getElementById('map'), {
      center: pyrmont,
      zoom: 15
    });

  var request = {
    location: pyrmont,
    radius: '500',
    types: ['store']
  };

  service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      var place = results[i];
      createMarker(results[i]);
    }
  }
}

tout le monde veut avoir accès à l'identifiant de lieu et à son contenu, voici comment nous procédons .... Dans la fonction de rappel, nous avons le tableau JSONArray des lieux renvoyés par Google ... Dans la fonction de rappel à l'intérieur de la boucle for après la ligne var place = results[i]; vous pouvez obtenir ce que vous voulez comme

console.log(place.name);
console.log(place.place_id);
var types = String(place.types);
types=types.split(",");
console.log(types[0]);
4
Subendra Sharma

J'ai pu résoudre le problème en créant un fichier PHP sur le même serveur que mon fichier javascript. Puis utilisez cURL pour récupérer les données de Google et les renvoyer dans mon fichier js.

Fichier PHP

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://maps.googleapis.com/maps/api/place/textsearch/xml?query=" . $_POST['search'] . "&key=".$api);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$output = curl_exec($ch);
curl_close($ch);
echo $output;

Fichier Javascript

var search = encodeURI($("#input_field").val());
$.post("curl.php", { search: search }, function(xml){
  $(xml).find('result').each(function(){
    var title = $(this).find('name').text();
    console.log(title);
  });
});

Avec cette solution, je ne reçois aucune erreur CORS.

3
Eric Reynolds

Google fournit une bibliothèque client API:

<script src="https://apis.google.com/js/api.js" type="text/javascript"></script>

Il peut faire des demandes d'API Google pour vous, en fonction du chemin d'accès et des paramètres de l'API: 

var restRequest = gapi.client.request({
  'path': 'https://people.googleapis.com/v1/people/me/connections',
  'params': {'sortOrder': 'LAST_NAME_ASCENDING'}
});

Étant donné que la bibliothèque est servie à partir du domaine Google, elle peut appeler en toute sécurité les API de Google sans problème CORS.

Google docs sur la façon d'utiliser CORS.

2
S.D.

J'ai accédé à l'API google maps comme ceci

    $scope.getLocationFromAddress = function(address) {
    if($scope.address!="Your Location"){
        $scope.position = "";
        delete $http.defaults.headers.common['X-Requested-With'];
        $http(
                {
                    method : 'GET',
                    url : 'https://maps.googleapis.com/maps/api/geocode/json?address='+ address+'&key=AIzaSyAAqEuv_SHtc0ByecPXSQiKH5f2p2t5oP4',

                }).success(function(data, status, headers, config) {

            $scope.position = data.results[0].geometry.location.lat+","+data.results[0].geometry.location.lng;                              
        }).error(function(data, status, headers, config) {
            debugger;
            console.log(data);
        });
    }
}
1
lakme.1989

Je l'ai obtenu après avoir trouvé la réponse de @sideshowbarker ici:

Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée - lors d'une tentative d'obtention de données à partir d'une API REST

Et ensuite utilisé cette approche pour le faire fonctionner: 

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?"))

Plus d'informations peuvent être trouvées dans la réponse au lien ci-dessus.

1
Sgedda

Il n'y a aucun moyen, côté client, d'utiliser ajax de récupérer Google Place API, de ne pas utiliser jsonp (erreur de syntaxe :) ni de résoudre le problème, 

La seule solution côté client consiste à utiliser la bibliothèque Google Javascript de Google https://developers.google.com/maps/documentation/javascript/tutorial

Ou vous pouvez aller chercher l'API Google Place côté serveur, puis créer votre propre API pour votre côté client.

1
EthanChou

Salut,

S'il vous plaît essayer avec la matrice de distance de Google

    var Origin = new google.maps.LatLng(detectedLatitude,detectedLongitude);       
    var destination = new google.maps.LatLng(latitudeVal,langtitudeVal);
    var service = new google.maps.DistanceMatrixService();
    service.getDistanceMatrix(
      {
        origins: [Origin],
        destinations: [destination],
        travelMode: 'DRIVING',            
        unitSystem: google.maps.UnitSystem.METRIC,
        durationInTraffic: true,
        avoidHighways: false,
        avoidTolls: false
      }, response_data);

      function response_data(responseDis, status) {
      if (status !== google.maps.DistanceMatrixStatus.OK || status != "OK"){
        console.log('Error:', status);
        // OR
        alert(status);
      }else{
           alert(responseDis.rows[0].elements[0].distance.text);
      }
  });

Si vous utilisez JSONP, vous obtiendrez parfois une erreur d'instruction manquante dans la CONSOLE.

Veuillez vous référer à ce document cliquez ici

0
Nadimuthu Sarangapani