Problema de CORS en localhost al llamar al servicio REST desde angularjs
Estoy aprendiendo angularJS e intento implementarlo en mi aplicación.
Tengo un servicio RESTful WCF alojado en localhost IIS. Tiene un método GET definido para obtener una lista de documentos:http: // localhost: 70 / DocumentRESTService.svc / GetDocuments /
Ahora estoy tratando de consumir este servicio en mi aplicación angular y mostrar los datos. El siguiente es el 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;});
});
El comportamiento extraño es que este código funciona perfectamente bien en IE11, mientras que no se ejecuta en Chrome / Firefox.
La siguiente es la respuesta en Chrome: (para mi servicio REST), mientras que el servicio REST de w3schools funcionó bien.
{"data": null, "status": 0, "config": {"method": "GET", "transformRequest": [null], "transformResponse": [null], "url": "http: // localhost: 70 / DocumentRESTService.svc / GetDocuments /"," encabezados ": {" Aceptar ":" application / json, text / plain,/"}}," statusText ":" "}
La consola muestra el siguiente mensaje de error.
[Consola de Chrome: al abrir desdesistema de archivos]XMLHttpRequest no se puede cargarhttp: // localhost: 70 / DocumentRESTService.svc / GetDocuments /. No hay encabezado 'Access-Control-Allow-Origin' presente en el recurso solicitado. Por lo tanto, 'file: //' de origen no tiene acceso permitido.
[Consola de Chrome: alojada usandoSoportes]XMLHttpRequest no se puede cargarhttp: // localhost: 70 / DocumentRESTService.svc / GetDocuments /. No hay encabezado 'Access-Control-Allow-Origin' presente en el recurso solicitado. Origen 'http://127.0.0.1:55969'por lo tanto, no se permite el acceso.
[Consola de Firefox:]Solicitud de origen cruzado bloqueada: la misma política de origen no permite leer el recurso remoto enhttp: // localhost: 70 / DocumentRESTService.svc / GetDocuments /. Esto se puede solucionar moviendo el recurso al mismo dominio o habilitando CORS.
La pregunta aquí son pocas:
¿Por qué se considera localhost o my machineName como una solicitud de dominio cruzado? Estoy en el mismo dominio, ¿no?¿Hay que hacer algún cambio al final de mi servicio para habilitar este comportamiento? En caso afirmativo, ¿en qué parte del servicio WCF?aquí )un JSONP puede ser útil en este caso? En caso afirmativo, ¿cómo lo usaría? ¿funcionaría con solicitudes que necesitan encabezados personalizados? (NO estoy realmente seguro de lo que es, pero al volver a buscar encontró muchas respuestas que mencionan esto. Leer enlaces será útil).Cualquier ayuda o dirección será útil.
PD:
IDE:Soportes , si eso importa.AngularJS v1.4.3He referido varias preguntas de stackoverflow que hacen referencia a un problema similar (CORS), que involucró $ resource, $ provider, $ config, también algunos relacionados con la eliminación de algunos encabezados y la adición de algún valor a uno de los encabezados. Soy un poco ingenuo con esto; cualquier referencia a esto será útil.