CORS 和 Angular $http GET 到 Google Places API

Posted 2023-02-23

【中文标题】CORS 和 Angular $http GET 到 Google Places API

【英文标题】：CORS and Angular $http GET to Google Places API

【发布时间】：2017-03-12 11:11:03

【问题描述】：

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" : []
         ,

【参考方案1】：

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

请参阅此页面以了解其工作原理：

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

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

希望对你有帮助！

【讨论】：

当他询问文档未解决的特定问题时，将 OP 提交给文档是完全没有帮助的。

为什么文档没有解释这个主题？您不能通过 AJAX 调用使用 Web 服务，因为 Google 不会在他们这边设置 CORS 标头，所以唯一的选择是使用 Maps JavaScript API 的位置库。不是很清楚吗？我相信文档写得很好。

【参考方案2】：

经过研究，我找到了以下解决方案。它适用于角度 11。 一些 google get api 给出了 CORS 问题，所以要解决你需要安装在 npm 包下面

npm install axios

In the sevice.ts file
const axios = require('axios');

getTimeZone(latitude: any, longitude: any): any 
console.log("lat", latitude);

const url1 =
  `https://maps.googleapis.com/maps/api/timezone/json?location=` +
  latitude +
  "," +
  longitude +
  `&timestamp=1331161200&key=` +
  this.googleApiKey;
const config = 
  method: "get",
  url: url1,
  headers: ,
;
return new Observable<any>((observer) => 
  axios(config)
    .then(function (response: any): void 
      observer.next(response.data);
      // return response.data;
    )
    .catch(function (error: any): void 
      observer.next(error);
    );
);

在component.ts文件中

getTimezoneVal(lat: any, long: any): void 
    this.lat = lat;
    this.long = long;
    this.googleAddressService.getTimeZone(lat, long).subscribe(
      (res: any) => 
        console.log("res", res);
)

在组件文件中，您将得到响应，CORS 问题将得到解决.... 谢谢.... 维卡斯·阿南德

【参考方案3】：

我认为 JSONP 可能适用于这种情况，Jsonp 有助于解决跨域问题。