Google Place API – 请求的资源上没有“Access-Control-Allow-Origin”标头。 因此不允许原点’null’访问

我使用的是Google Place API。

我希望得到关于类型帮助的地方的建议。

所以，我所做的是 –

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

所以在我要求的链接是 –

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

如果我使用浏览器访问此链接，我可以获得类似的输出（请尝试ck​​） –

但是，如果我尝试使用jQuery的.getJSON或.ajax ，我会通过此消息阻止我的请求 –

。

因此，XMLHTTPRequest被阻止 –

请求的资源上不存在“Access-Control-Allow-Origin”标头。 因此不允许原点’null’访问。

我已经在StackOverflow中检查了这个问题的解决方案并通过这里 ，[这里4和这里 ，但无法完美地得到我的解决方案。

有谁能请赐教？

Answer 1

只有当发送方和接收方的端口，协议和域相等时，AJAX请求才有可能，否则可能导致CORS。 CORS代表跨源资源共享，必须在服务器端支持。

解

JSONP

JSONP或“带填充的JSON”是在Web浏览器中运行的JavaScript程序中使用的通信技术，用于从不同域中的服务器请求数据，这是典型Web浏览器因同源策略而禁止的。

像这样的东西可能会帮助你交配.. 🙂

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

Answer 2

好的，这就是我们在javascript中的表现…谷歌有自己的function….

链接： 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]); } } } 

任何人都希望获得访问地点的ID和东西这就是我们这样做....在回调函数中我们有谷歌返回的地方的JSONArray ...在回调函数里面的for循环之后var place = results[i]; 你可以得到你想要的wat

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

Answer 3

Google提供API客户端库：

鉴于API路径和参数，它可以为您执行google API请求：

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

由于该库是从谷歌域提供的，因此可以安全地调用谷歌API而无需CORS问题。

Google文档介绍了如何使用CORS。

Answer 4

我能够通过在与javascript文件相同的服务器上创建PHP文件来解决问题。 然后使用cURL从Google获取数据并将其发送回我的js文件。

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; 

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

使用此解决方案，我不会收到任何CORS错误。

Answer 5

我像这样访问了谷歌地图API

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

Answer 6

嗨，

请尝试使用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); } }); 

如果您使用的是JSONP，有时您会在CONSOLE中丢失语句错误。

请参阅此文档， 请单击此处

Answer 7

在客户端我们无法使用ajax获取Google Place API ，既不使用jsonp （语法错误:)也不会遇到cors问题，

客户端的唯一方法是使用Google Javascript库，而不是https://developers.google.com/maps/documentation/javascript/tutorial

或者您可以在服务器端获取google place api，然后为您的客户端创建自己的api。

Answer 8

在@sideshowbarker找到答案后，我得到了它的工作：

尝试从REST API获取数据时，请求的资源上不存在“Access-Control-Allow-Origin”标头

然后使用这种方法使其工作：

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

更多信息可以在上面链接的答案中找到。