Problema do CORS no host local ao chamar o serviço REST de angularjs

Question

Jul 24, 2015, 04:18 PM

Problema do CORS no host local ao chamar o serviço REST de angularjs

Estou aprendendo o angularJS e tentando implementá-lo no meu aplicativo.

Eu tenho um serviço WCF RESTful hospedado no IIS localhost. Possui um método GET definido para buscar uma lista de documentos:http: // localhost: 70 / DocumentRESTService.svc / GetDocuments /

Agora estou tentando consumir esse serviço no meu aplicativo angular e exibir os dados. A seguir está o código: HTML:

<html>
    <script src="../../dist/js/angular/angular.min.js"></script>
    <script src="../../assets/js/one.js"></script>
    <body ng-app="myoneapp" ng-controller="oneAppCtrl">
                {{"Hello" + "AngularJS"}}
        <hr>
        <h1> Response from my REST Service </h1>
        {{hashValue}}

        <hr>
        <h1> Response from w3school REST Service </h1>
        {{names}}


    </body>
</html>

JS:

angular.module('myoneapp', [])
    .controller('oneAppCtrl', function($scope,$http){
        $scope.documentValue = {};

        $http({method: 'GET',
                url: 'http://localhost:70/DocumentRESTService.svc/GetDocuments/',
                headers:
                        {
//                          'Access-Control-Allow-Origin': 'http://localhost'
                        }                   
               })
            .success(function(data){ alert('Success!'); $scope.documentValue=data;})
            .error(function(data){ alert('Error!'); $scope.documentValue=data; alert('Error!' + $scope.documentValue);})
            .catch(function(data){ alert('Catch!'); $scope.documentValue= data;});

        $http.get("http://www.w3schools.com/angular/customers.php")
            .success(function(response) {$scope.names = response.records;});            
});

O comportamento estranho é que esse código funciona perfeitamente no IE11, enquanto não é executado no Chrome / Firefox.

A seguir está a resposta no chrome: (para o meu serviço REST), enquanto o serviço REST da w3schools funcionou bem.

{"data": null, "status": 0, "config": {"method": "GET", "transformRequest": [null], "transformResponse": [null], "url": "http: // localhost: 70 / DocumentRESTService.svc / GetDocuments /"," headers ": {" Accept ":" application / json, text / plain,/"}}," statusText ":" "}

Console exibido após a mensagem de erro.

[Console do Chrome: abrindo emsistema de arquivo]

XMLHttpRequest não pode carregarhttp: // localhost: 70 / DocumentRESTService.svc / GetDocuments /. Nenhum cabeçalho 'Access-Control-Allow-Origin' está presente no recurso solicitado. Portanto, 'file: //' de origem não tem acesso permitido.

[Console do Chrome: hospedado usandoSuportes]

XMLHttpRequest não pode carregarhttp: // localhost: 70 / DocumentRESTService.svc / GetDocuments /. Nenhum cabeçalho 'Access-Control-Allow-Origin' está presente no recurso solicitado. Origemhttp://127.0.0.1:55969'não é, portanto, permitido o acesso.

[Firefox Console:]

Solicitação de origem cruzada bloqueada: a mesma política de origem não permite a leitura do recurso remoto emhttp: // localhost: 70 / DocumentRESTService.svc / GetDocuments /. Isso pode ser corrigido movendo o recurso para o mesmo domínio ou ativando o CORS.

A questão aqui são poucas:

Por que localhost ou my machineName é considerado uma solicitação entre domínios? Estou no mesmo domínio, não estou?Há alguma alteração necessária no final do meu serviço para ativar esse comportamento? Se sim, onde no Serviço WCF? (Com base em algo que liaqui )um JSONP pode ser útil neste caso? Se sim, como eu o usaria? funcionaria com solicitações que precisam de cabeçalhos personalizados? (NÃO tenho certeza do que é, mas, ao pesquisar novamente, encontrei muitas respostas mencionando isso. ler links será útil.)

Qualquer ajuda ou orientação será útil.

P.S:

IDE:Suportes , se isso importa.AngularJS v1.4.3Mencionei várias perguntas sobre stackoverflow referentes ao problema semelhante (CORS), que envolviam $ resource, $ provider, $ config, também algumas relacionadas à exclusão de algum cabeçalho e adição de algum valor ao cabeçalho. Sou um pouco ingênuo a isso - qualquer referência a isso será útil.