javascript - CORS和Google Maps HTTP API调用



angular google-maps-api-3 (1)

从Web应用调用Place Autocomplete API的受支持方式是 使用Places库

<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>

这样,响应缺少 Access-Control-Allow-Origin 标头并不重要。

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

我正在尝试与Google Maps Places Autocomplete API进行Angular对话。 问题是服务器不允许CORS调用(它不返回 Access-Control-Allow-Origin 标头),并且JSONP调用似乎也是徒劳的,因为它返回普通的JSON而不是JSONP,导致语法错误。

这是我目前在服务函数中尝试的( _jsonp 是一个 Jsonp 对象):

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

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

这太疯狂了。 如果CORS被禁用且JSONP调用不起作用,我怎么能访问它?

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

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





cors