CORS和Angular $ http GET到Google Places API [英] CORS and Angular $http GET to Google Places API

问题描述

我可以成功地使用地理位置服务：

$ b $

  .controller（'MainCtrl'，[
'$ scope'，
'$ http'，
函数（$ 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无法加载https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=36.23...5.1458888&type=bar&key=xxx。请求的资源上没有Access-Control-Allow-Origin标题。 Origin'http：//0.0.0.0:3000'因此不允许访问。

问题：我能够从Angular创建这些类型的请求，还是需要设置后端才能进行该调用？

我尝试使用JSONP作为方法， CORS问题，但是我遇到了无法访问数据的问题。不知道它是无效的JSON ...但它说意外的标识符：，并且当我查看源代码时，它对我来说看起来非常好数据：

  {
html_attributions：[]，
results：[
 {
geometry ：{
location：{
lat：36.2388477，
lng：-115.1540073 
}，
}，
图标：https://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png，
id：578bfba1f17b0c5fbdafd5b71600b50d3e95c1ca，
name：Ruby Tuesday ，
opening_hours：{
open_now：true，
weekday_text：[] 
}，
   $ b $ 
解决方案
 b 
 
请参考以下网页了解它的工作原理： 
 
 
  https://developers.google.com/maps/documentation/javascript/places  
 $ b 
否则，您必须创建后端服务器以向Google发送请求并将响应传递给您的客户端代码。
 
 
 
希望它有帮助！
 
New to angular, trying to setup a very simple application using the Google Maps / Places API.

I can successfully use the geolocation service with:
.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);
    });
   }
}])
Problem: 
When I try a similar GET request to their Places API - I get CORS errors:

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.

Question: Am I able to make these types of requests from Angular or do I need to setup the backend to make that call instead?

I tried using JSONP as the method, which passed the CORS issue, but then I have the problem of not being able to access the data.  Not sure if it's invalid JSON... but it says Unexpected identifier :, and when I view the source it looks like perfectly fine data to me:
{
   "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" : []
         },

解决方案
You can use Places API on client side via the library included in Google Maps JavaScript API.

Please refer to this page to figure out how it works:

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

Otherwise, you have to create your backend server to send requests to Google and pass response to your client side code.

Hope it helps!

                        
这篇关于CORS和Angular $ http GET到Google Places API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！