没有 'Access-Control-Allow-Origin' Angular 2

Question

具体来说，我正在对距离矩阵 google api 发出获取请求，但得到的是 'Access-Control-Allow-Origin'.

this.http.get(googleApiurl).map(response => response.json()).subscribe(
    //Code here
);

因为这个头是一个响应头而不是请求头，我试过：

In constructor->private res: ResponseOptions
this.res.headers.append('Access-Control-Allow-Origin','*');

你能帮我吗？

Answer 1

我建议您从您的服务器请求 Google API。但是，如果您不想设置服务器，则有一些解决方法。

解决方案一：

我遇到了同样的问题并通过使用 PlacesService 获取 PlaceID 来修复它

// Get Place ID from Address 
function getPlaceIDFromAddress(address, callback){
          var place = {};
          var request = {
            location: new google.maps.LatLng(myLat, myLng),
            radius: '50',
            query: address
          };
          var service = new google.maps.places.PlacesService($scope.mapContainer);
          service.textSearch(request, function(results, status){
             if (status == google.maps.places.PlacesServiceStatus.OK) {     
                    var placeId = results[0].place_id;
                    var location = results[0].geometry.location;                    
                return callback(null, placeId);
              }
          });
    }

然后将 PlaceID 传递给地理编码器以获取 LatLng，或者您可以将 LatLng 传递给 GeoCode 以获取地址。

(new google.maps.Geocoder()).geocode({placeId: places_id}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
     console.log("Address: ", results[0].formatted_address);
}});

方案二：

虽然不推荐。

如果您只想在您的本地主机上进行测试，您可以安装 this chrome 扩展。在调用矩阵 api

之前打开它

此扩展将在 header 中插入 'Access-Control-Allow-Origin'。

没有 'Access-Control-Allow-Origin' Angular 2

Getting No 'Access-Control-Allow-Origin' Angular 2

angular

ionic2

cors

google-distancematrix-api