CORS和Angular $ http GET到Google Places API

Question

Angular的新手，它尝试使用Google Maps / Places API设置一个非常简单的应用程序。

我可以通过以下方式成功使用地理位置服务：

.controller('MainCtrl', [
  '$scope',
  '$http',
  function($scope, $http){
     $scope.userLocation = [];
     $scope.currentLocation = function() {
       $http({
         method: 'GET',
         url: 'https://www.googleapis.com/geolocation/v1/geolocate?key=xxx'
    }).then(function successCallback(response) {
      $scope.userLocation.push(response);
    });
   }
}])

问题： 当我尝试对他们的Places API进行类似的GET请求时-我收到CORS错误：

XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=36.23…5.1458888&type=bar&key=xxx. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://0.0.0.0:3000' is therefore not allowed access.

问题： 我是否可以从Angular发出这些类型的请求，还是需要设置后端来进行该调用？

我尝试使用JSONP作为方法，该方法通过了CORS问题，但随后出现无法访问数据的问题。不知道它是否是无效的JSON …，但显示为Unexpected identifier :，当我查看源代码时，对我来说似乎是非常好的数据：

{
   "html_attributions" : [],
   "results" : [
      {
         "geometry" : {
            "location" : {
               "lat" : 36.2388477,
               "lng" : -115.1540073
            },
         },
         "icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png",
         "id" : "578bfba1f17b0c5fbdafd5b71600b50d3e95c1ca",
         "name" : "Ruby Tuesday",
         "opening_hours" : {
            "open_now" : true,
            "weekday_text" : []
         },

Answer 1

您可以通过Google Maps JavaScript API中包含的库在客户端使用Places API。

请参考此页面以了解其工作方式：

https://developers.google.com/maps/documentation/javascript/places

否则，您必须创建后端服务器才能将请求发送到Google，并将响应传递给客户端代码。

希望能帮助到你！