いいえ「アクセス制御 - 許可 - 起源」ヘッダは、私は私のコードに問題が何であるかを知らない要求angularJS内のリソースとWeb API

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

構成コード：私のweb.configファイルで

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

：

<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で同じことをしようとしています。データは受信中ですが、それでもエラーが表示されます。 Plunkr： https://plnkr.co/edit/2BILJy2wsBrWlMrgMurZ?p=preview

Answer 1

角度$ httpは、常にJSONデータであり、xmlではありません。

あなたはJSONにあなたのURLを変更した場合、あなたはXMLではなくGoogleからのJSONレスポンスを取得します：

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

をしかし、Googleによる好ましい方法は、彼らのJSライブラリを使用することです。

私はこの角度ライブラリを使用し、それは素晴らしい作品：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"/> 

そして、ここでは私のコントローラ機能は

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