Estoy aprendiendo angularJS y tratando de implementarlo en mi aplicación.

Tengo un Relajante servicio de WCF alojado en localhost IIS.
Tiene un método definido para obtener una lista de los documentos : http://localhost:70/DocumentRESTService.svc/GetDocuments/

Ahora estoy tratando de consumir este servicio en mi angulares de la aplicación 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 funciona en Chrome/Firefox.

Siguiente es la respuesta en el chrome:(para mi servicio REST) , mientras que el RESTO de servicios de w3schools funcionado bien.

{«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»:»»}

Consola muestra mensaje de error siguiente.

  • [Chrome Consola:Por apertura de sistema de ficheros]

XMLHttpRequest no se puede cargar http://localhost:70/DocumentRESTService.svc/GetDocuments/. No ‘Access-Control-Allow-Origin’ encabezado presente en el recurso solicitado. Origen ‘file://’ es, por tanto, no se permite el acceso.

  • [Chrome Consola:organizado mediante Soportes]

XMLHttpRequest no se puede cargar http://localhost:70/DocumentRESTService.svc/GetDocuments/. No ‘Access-Control-Allow-Origin’ encabezado presente en el recurso solicitado. Origen ‘http://127.0.0.1:55969‘ es, por tanto, no se permite el acceso.

  • [Firefox Consola:]

Cruz-Solicitud de Origen Bloqueado: El Origen Mismo de la Política no permite la lectura remota de los recursos en http://localhost:70/DocumentRESTService.svc/GetDocuments/. Esto puede ser solucionado mediante el movimiento de los recursos para el mismo dominio o habilitar CORS.

La pregunta aquí están algunos:

  1. ¿Por qué es localhost o mi machineName considera una cruz solicitud de dominio ? Yo estoy en el mismo dominio , no soy ?
  2. Hay cualquier cambio necesario de hacer en mi servicio final para activar este comportamiento? Si sí , donde en Servicio WCF ?( basado en algo que he leído aquí )
  3. un JSONP ser útil en este caso ? Si sí , ¿cómo lo uso ? es trabajar con las solicitudes que necesitan los encabezados personalizados ?( No muy seguro de lo que es , pero mientras resarching se encontró una gran cantidad de respuestas que hablan de esta. la lectura de los enlaces será de ayuda. )

Cualquier ayuda o dirección será útil.

P. S:

  • IDE:Soportes , si lo que importa .
  • AngularJS v1.4.3
  • Me he referido varias stackoverflow preguntas referidas problema similar (CORS) , que involucró a $recurso , $proveedor , $config , También algunos relacionados con la eliminación de algunos de encabezado y la adición de valor a uno de la cabecera. Yo soy poco ingenuo, para esta – cualquier referencia a esto le será útil.
un puerto diferente o un subdominio es también considerar cruz de dominio en el navegador. Presumiblemente, su página se abre en otro puerto? Cómo implementar CORS para cualquier entorno de servidor está bien documentada en todo el lugar … simple búsqueda en la web. También puede utilizar file:// protocolo al abrir su página. Ni siquiera CORS ayudará a no
Su carga de la página a través de una url localhost así? (como opuesto a file:// o 127.0.0.1)
De interés, es decir, no se preocupa de los números de puerto para CORS-así que usted puede utilizar para probar. Alternativamente, iniciar chrome con chrome --args --disable-web-security y no hacer los controles en contra de CORS.
el problema no es de olvidar que las personas discapacitadas y dejando un agujero de seguridad en su máquina. Habilitar CORS es más ideal de la OMI
totalmente de acuerdo, a largo plazo, sino simplemente empezar a trabajar en cosas que pueden ser de utilidad para conocer las soluciones.

OriginalEl autor Bhramar | 2015-07-24

4 Comentarios

  1. 7

    Yo podría resolver este problema.
    Un par de formas de hacerlo – estoy escribiendo todo lo que he probado y sus referencias.

    Respuesta a
    Ques1.

    'Why is localhost or my machineName considered to be a cross-domain request?'

    como @charlietfl mencionado y he Investigado aquí: un puerto diferente o un subdominio es también considerar cruz de dominio en el navegador.

    Respuesta a
    Ques2.

    'Are there any changes required to do at my service end to enable this behavior?'

    ¡SÍ! el cambio es necesario en el servidor propio fin. El servidor debe responder a la solicitud con

    Access-Control-Allow-Origin: *

    encabezado. Aquí el * puede ser reemplazado con el encabezado de solicitud propia o según su requisito de aplicación. Excelente blog aquí explicando la solución si estás usando WCF RESTO de Servicios. Usted necesita agregar la siguiente línea (encabezados) a cada uno su método de servicio para habilitar CORS en sus métodos de servicio.

    WebOperationContext.Actual.OutgoingResponse.Los encabezados.Agregar(

    «Access-Control-Allow-Origin», «*»);
    WebOperationContext.Actual.OutgoingResponse.Los encabezados.Agregar(

    «Access-Control-Allow-Métodos», «POST»);
    WebOperationContext.Actual.OutgoingResponse.Los encabezados.Agregar(

    «Access-Control-Allow-Headers», «Content-Type, Aceptar»);

    Una especificación aquí es muy útil para habilitar CORS en el servidor /cliente.

    Respuesta a Ques3.

    JSONP mayoría trabaja para las solicitudes GET y no son más aconsejable el uso ,en lugar de habilitar CORS es la más recomendada. (No he explorado esta área mucho, pero Wiki & stackoverflow artículo aquí fueron muy descriptivo).

    Aparte de que, para el propósito de pruebas, un buen chrome extensión aquí puede ser útil. Puede ser utilizado para asegurar que la aplicación ha CORS problemas.

    así que se trata de una respuesta a la pregunta, o un intento de responder a los comentarios?
    principalmente, este puede ser considerado como una respuesta, sino esperar a los demás a responder si alguien se le ocurre corregir/añadir a esta comprensión.

    OriginalEl autor Bhramar

  2. 4

    He luchado durante mucho tiempo con CORS problemas causados por la interacción de un emulador Iónica del proyecto (que se ejecuta localmente) con algunas pequeñas Node.JS servicios web (también ejecuta localmente).

    He aquí el corto y fácil solución : Chrome plugin AllowControlAllowOrigin.

    https://chrome.google.com/webstore/search/cross%20origin?utm_source=chrome-ntp-icon&_category=extensions

    Solo tienes que cambiar el botón de radio de rojo a verde, y no más de solicitud bloqueado, de error o de advertencia !
    Por supuesto, es una solución temporal y puede que tenga que poner sus manos en sus encabezados de solicitud cuando el tiempo para detener el local de las pruebas vendrá. En el ínterin, que es una gran manera de evitar perder el tiempo en esas molesta temas recurrentes.

    OriginalEl autor Sendil.J

  3. 1

    Si se enfrentan a CORS problema en AngularJS aplicaciones, mientras que el acceso a la API de REST, corriendo en localhost de la máquina compruebe lo siguiente: Agregar el CORS Filtro en el servidor de la aplicación. En mi caso, he añadido el siguiente código en la Primavera de aplicación

    import java.io.IOException;
    import javax.servlet.Filter;
    import javax.servlet.FilterChain;
    import javax.servlet.FilterConfig;
    import javax.servlet.ServletException;
    import javax.servlet.ServletRequest;
    import javax.servlet.ServletResponse;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    import org.springframework.stereotype.Component;
    @Component
    public class SimpleCORSFilter implements Filter {
    private final Logger log = LoggerFactory.getLogger(SimpleCORSFilter.class);
    public SimpleCORSFilter() {
    log.info("SimpleCORSFilter init");
    }
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
    throws IOException, ServletException {
    HttpServletRequest request = (HttpServletRequest) req;
    HttpServletResponse response = (HttpServletResponse) res;
    response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
    response.setHeader("Access-Control-Allow-Credentials", "true");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With, remember-me");
    chain.doFilter(req, res);
    }
    @Override
    public void init(FilterConfig filterConfig) {
    }
    @Override
    public void destroy() {
    }
    }

    En angularjs código, no dan la URL http://localhost:8080/../. En lugar de localhost dar su número IP del host.

    Funcionará correctamente

    Estaba teniendo este problema con express y angular2, no tuve que configurar Access-Control-* los encabezados, acabo de cambiar el ángulo en el punto a 127.0.0.1:3000 y se ha resuelto el problema de seguridad. Gracias!

    OriginalEl autor Suresh Selvaraj

Dejar respuesta

Please enter your comment!
Please enter your name here