wake-up-neo.net

Google Place-API - Auf der angeforderten Ressource ist kein Header "Access-Control-Allow-Origin" vorhanden. Origin 'null' hat daher keinen Zugriff

Ich benutze Google Place API.

Was möchte ich von Ort für Tipphilfe erhalten.

Also, was ich getan habe ist

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

In welchem ​​Link bitte ich also -

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

Und wenn ich zu diesem Link mit dem Browser gehe, kann ich eine ähnliche Ausgabe erhalten (bitte versuchen Sie es zu ck) -

11

Aber wenn ich es mit jQuery's .getJSON oder .ajax versuche, wird meine Anfrage mit dieser Nachricht blockiert.

222.

SO das XMLHTTPRequest ist blockiert wegen - 

Auf der angeforderten Ressource ist kein Header "Access-Control-Allow-Origin" vorhanden. Origin 'null' hat daher keinen Zugriff.

Ich habe in StackOverflow für diese Problemlösung eingecheckt und gehe durch hier , [hier 4 und hier , kann aber meine Lösung nicht perfekt bekommen.

Kann jemand mich bitte aufklären?

27
Abrar Jahin

AJAX-Anfragen sind nur möglich, wenn Port, Protokoll und Domäne von Sender und Empfänger gleich sind, andernfalls führt dies zu CORS. CORS steht für Cross-Origin Resource Sharing und muss serverseitig unterstützt werden.

Lösung

JSONP

JSONP oder "JSON with padding" ist eine Kommunikationstechnik, die in JavaScript-Programmen verwendet wird, die in Webbrowsern ausgeführt werden, um Daten von einem Server in einer anderen Domäne anzufordern. Dies ist bei typischen Webbrowsern aufgrund der Origin-Richtlinie nicht zulässig.

So etwas könnte dir helfen zu paaren .. :)

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

ok also so machen wir es in javascript ... google haben dafür eigene funktionen ....

link: 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]);
    }
  }
}

jeder möchte Zugriff auf die Orts-ID erhalten und so. So machen wir das .... In der Rückruffunktion haben wir den JSONArray von Orten, die von Google zurückgegeben werden var place = results[i]; Sie können bekommen, was Sie möchten

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

Ich konnte das Problem durch Erstellen einer PHP -Datei auf dem gleichen Server wie meine Javascript-Datei lösen. Dann verwenden Sie cURL, um die Daten von Google abzurufen und an meine js-Datei zu senden.

PHP-Datei

$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;

Javascript-Datei

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

Mit dieser Lösung bekomme ich keine CORS-Fehler.

3
Eric Reynolds

Google bietet eine API-Client-Bibliothek:

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

Es kann Google API-Anforderungen für Sie ausführen, wenn Sie den API-Pfad und die Parameter angeben: 

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

Da die Bibliothek über eine Google-Domäne bereitgestellt wird, kann sie ohne Probleme mit CORS die Google-APIs aufrufen.

Google-Dokumente zur Verwendung von CORS.

2
S.D.

Ich habe so auf die Google Maps API zugegriffen

    $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

Nachdem ich die Antwort von @sideshowbarker gefunden hatte, funktionierte es:

Auf der angeforderten Ressource ist kein Header "Access-Control-Allow-Origin" vorhanden, wenn versucht wird, Daten von einer REST -API abzurufen

Und dann diesen Ansatz verwendet, um es zum Laufen zu bringen: 

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

Weitere Informationen finden Sie in der Antwort unter dem obigen Link.

1
Sgedda

Auf Client-Seite gibt es keine Möglichkeit, ajax abzurufen Google Place API, verwenden Sie weder jsonp (Syntaxfehler :), noch haben wir cors Problem getroffen,

Die einzige Möglichkeit auf der Clientseite ist die Verwendung der Google Javascript Library https://developers.google.com/maps/documentation/javascript/tutorial

Oder Sie können Google Place API auf der Serverseite abrufen und dann Ihre eigene API für Ihre Clientseite erstellen.

1
EthanChou

Hallo,

Bitte versuchen Sie es mit der Google Entfernungsmatrix

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

Wenn Sie JSONP verwenden, wird in der CONSOLE manchmal ein Anweisungsfehler angezeigt.

Bitte beziehen Sie sich auf dieses Dokument klicken Sie hier