Angular CORS / JSONP和Google Maps HTTP API调用 [英] Angular CORS/JSONP and Google Maps HTTP API calls

问题描述

我正在尝试与Google地图位置自动填充API进行Angular交谈。问题是服务器不允许CORS调用（它不会返回一个 Access-Control-Allow-Origin 头），并且JSONP调用似乎也是徒劳的它返回纯JSON而不是JSONP，导致语法错误。

这是我目前在服务函数中尝试的（ _jsonp 是一个 Jsonp 对象）：

  return this。 _jsonp.request（url，{method：'GET'}）; 
  

这不起作用。响应到了，但Angular崩溃，因为它不是JSONP，而是JSON。

这太疯狂了。

  https：//maps.googleapis如果CORS被禁用并且JSONP调用不起作用，我怎么能访问它？ .com / maps / api / place / autocomplete / json？key = ACCESS_KEY& types =（cities）& input = ber 
  

有没有办法将JSON服务器响应转换为Observable管道中的JSONP数据对象？

>支持从Web应用程序调用Place Autocomplete API的方式是使用地点库：

 < script> 
函数initMap（）{
 var map = new google.maps.Map（document.getElementById（'map'），{
 center：{lat：-33.8688，lng：151.2195}， 
 zoom：13 
}）; 
 ... 
 map.controls [google.maps.ControlPosition.TOP_RIGHT] .push（card）; 
 var autocomplete = new google.maps.places.Autocomplete（input）; 
 autocomplete.bindTo（'bounds'，map）; 
 var infowindow = new google.maps.InfoWindow（）; 
 var infowindowContent = document.getElementById（'infowindow-content'）; 
 infowindow.setContent（infowindowContent）; 
 var marker = new google.maps.Marker（{
 map：map，
 anchorPoint：new google.maps.Point（0，-29）
}）; 
< / script> 
< script 
 src =https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap
 async defer><<< ; /脚本> 
  

通过这种方式，没有问题，答案缺少访问控制-Allow-Origin 头。

通过脚本使用Google Maps JavaScript API 元素加载库，然后使用 google.maps.Map 和其他 google.maps。* 方法 - 是唯一受支持的方式。 Google故意不允许通过使用XHR或Fetch API发送的请求来完成此操作。

I am trying to get Angular talk to Google Maps Places Autocomplete API. The problem is that the server doesn't allow CORS calls (it doesn't return an Access-Control-Allow-Origin header) and JSONP calls also seem to be futile as it returns plain JSON and not JSONP, causing a syntax error.

This is what I am currently trying in a service function (_jsonp is a Jsonp object):

return this._jsonp.request(url, { method: 'GET' });

And this doesn't work. The response arrives, but Angular crashes because it's not JSONP but JSON.

This is crazy. How on earth can I access this if CORS is disabled and JSONP calls don't work?

https://maps.googleapis.com/maps/api/place/autocomplete/json?key=ACCESS_KEY&types=(cities)&input=ber

Is there a way to convert a JSON server response into a JSONP data object in the Observable pipeline?

解决方案

The supported way to call the Place Autocomplete API from a web app is using the Places library:

<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -33.8688, lng: 151.2195},
      zoom: 13
    });
    ...
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindTo('bounds', map);
    var infowindow = new google.maps.InfoWindow();
    var infowindowContent = document.getElementById('infowindow-content');
    infowindow.setContent(infowindowContent);
    var marker = new google.maps.Marker({
      map: map,
      anchorPoint: new google.maps.Point(0, -29)
    });
</script>
<script
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
  async defer></script>

That way it doesn’t matter that the responses lack the Access-Control-Allow-Origin header.

Using the Maps JavaScript API that way—by way of a script element to load the library, and then using the google.maps.Map and other google.maps.* methods—is the only supported way. Google intentionally does not allow doing it by way of requests sent with XHR or the Fetch API.

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