No 'Access-Control-Allow-Origin' header is present on the requested resource in angularJS and Web API

Question

I don't know what is the problem in my code :

My Factory Code

AddDealApp.factory('AddDealService', ['$http', function ($http) {

    delete $http.defaults.headers.common['X-Requested-With'];

    var fac = {};

    fac.GetPlaces = function (searchtext) {
        searchtext = searchtext.replace(" ", "+");
        var url = 'https://maps.googleapis.com/maps/api/place/textsearch/xml?query=' + searchtext + '&key=AIzaSyD-s3kxWqrVnBUkxCzkGb8vRy1dld3RSz4';

        var req = {
            method: 'get',
            url: url
        }

        var result = $http(req)
        return result
    }

    return fac;
}])

Configuration Code :

AddDealApp.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
}
]);

In My Web.config File :

<system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>

I did every thing to get the cross domain data , but it is still showing the same error.

If I request JSONP ,then data is coming, but the response recieved from the url is always in xml format.

UPDATE : Now I am trying to get the same thing with JSONP. Data is recieving, But it still showing error. Plunkr : https://plnkr.co/edit/2BILJy2wsBrWlMrgMurZ?p=preview

Answer 1

Angular $http always expects JSON data and not xml.

If you change your url to json then you will get json responses from google instead of xml:

var url = 'https://maps.googleapis.com/maps/api/place/textsearch/json?query=' + searchtext + '&key=AIzaSyD-s3kxWqrVnBUkxCzkGb8vRy1dld3RSz4';

But according to Google the preferred method is to use their JS libraries.

I use this angular library and it works great: https://github.com/kuhnza/angular-google-places-autocomplete

Here's my input:

<input class="form-control form-group-sm" type="text"
           id="ga_search"
           g-places-autocomplete options="autocompleteOptions"
           ng-model="ga_search"/>

And here's my controller function

$scope.ga_search = "";
                var watch = $scope.$watch('ga_search.address_components', function () {
                    //console.log("Update address");
                    if (typeof($scope.ga_search.address_components) != "undefined") {
                        $scope.propdata.street_number = "";
                        $scope.propdata.street = "";
                        $scope.propdata.suburb_text = "";
                        $scope.propdata.town_text = "";
                        $scope.propdata.region_text = "";
                        $scope.propdata.country_text = "";
                        $scope.propdata.post_code = "";
                        angular.forEach($scope.ga_search.address_components, function (val, key) {
                            //console.log(val);
                            switch (val.types[0]) {
                                case "street_number" :
                                    $scope.propdata.street_number = val.long_name;
                                    break;
                                case "route" :
                                    $scope.propdata.street = val.long_name;
                                    break;
                                case "sublocality_level_1" :
                                    $scope.propdata.suburb_text = val.long_name;
                                    break;
                                case "administrative_area_level_2" :
                                    $scope.propdata.town_text = val.long_name;
                                    break;
                                case "administrative_area_level_1" :
                                    $scope.propdata.province_text = val.long_name;
                                    break;
                                case "country" :
                                    $scope.propdata.country_text = val.long_name;
                                    break;
                                case "postal_code" :
                                    $scope.propdata.post_code = val.long_name;
                                    break;
                            }
                        });
                    }
                });