javascript - AngularJS 和 Web API 中请求的资源上不存在 'Access-Control-Allow-Origin' header

Question

我不知道我的代码有什么问题:

我的工厂代码

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;
}])

配置代码:

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

在我的 Web.config 文件中:

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

我做了一切努力来获取跨域数据，但它仍然显示相同的错误。

如果我请求 JSONP，那么数据就会到来，但从 url 收到的响应始终是 xml 格式。

更新: 现在我正在尝试使用 JSONP 获得同样的效果。正在接收数据，但仍然显示错误。 普朗克: https://plnkr.co/edit/2BILJy2wsBrWlMrgMurZ?p=preview

Answer 1

Angular $http 始终需要 JSON 数据而不是 xml。

如果您将 url 更改为 json，那么您将从 google 获得 json 响应而不是 xml:

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

但根据 Google 的说法，首选方法是使用他们的 JS 库。

我使用这个 Angular 库，它效果很好:https://github.com/kuhnza/angular-google-places-autocomplete

这是我的输入:

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

这是我的 Controller 功能

$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;
                            }
                        });
                    }
                });