$http.recibe, no es permitido por Access-Control-Allow-Origin pero $.ajax es

Tengo un problema recuperación de json desde un servidor remoto que puedo controlar. Tengo 2 aplicaciones web, una porción de datos y se ejecuta en el puerto 3311, la otra, solicitar los datos, se está ejecutando en el puerto 5000.

usando jquery las siguientes obras:

$.ajax({
  url: "http://localhost:3311/get-data",
  type: 'GET',
  dataType: 'json',
  beforeSend: function(xhr) {
    xhr.setRequestHeader("x-some-header", "some-value");
  }
})
.done(function(data) { 
    $rootScope.$apply(function() {d.resolve(data); });
})
.fail(function(data) {
    $rootScope.$apply(function() {d.reject(data); });
});

al intentar la misma petición get con angular

$http
    .get("http://localhost:3311/get-data", { headers: {"x-some-header": "some-value"} })
    .success(function(data) { d.resolve(data);})
    .error(function(data) { d.reject(data); });

Recibo el error

Origin http://localhost:5000 is not allowed by Access-Control-Allow-Origin.

El registro de la consola muestra un error que se produce después de que la solicitud de OPCIONES devuelve HTTP200

OPTIONS http://localhost:3311//get-data 200 (OK) angular.min.js:99

(anonymous function) angular.min.js:99

l angular.min.js:95

m angular.min.js:94

(anonymous function) app.js:78

b.extend.each jquery-1.9.1.min.js:3

b.fn.b.each jquery-1.9.1.min.js:3

(anonymous function) app.js:76

d angular.min.js:28

instantiate angular.min.js:28

(anonymous function) angular.min.js:52

updateView angular-ui-states.js:892

e.$broadcast angular.min.js:90

transition angular-ui-states.js:324

h angular.min.js:77

(anonymous function) angular.min.js:78

e.$eval angular.min.js:88

e.$digest angular.min.js:86

e.$apply angular.min.js:88

e angular.min.js:94

o angular.min.js:98

s.onreadystatechange angular.min.js:99

y los encabezados que se devuelve desde la solicitud de OPCIONES son

HTTP/1.1 200 OK
Cache-Control: private
Content-Type: text/plain
Server: Microsoft-IIS/8.0
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type, Accept, X-Requested-With, x-some-header
X-AspNet-Version: 4.0.30319
X-SourceFiles: =?UTF-8?B?....
X-Powered-By: ASP.NET
Date: Tue, 21 May 2013 01:52:37 GMT
Content-Length: 0
  • $http.defaults.useXDomain = true Angular y $.support.cors = true para jQuery ?
  • No he incluido algún tipo de configuración para jquery antes de hacer la llamada a $.ajax. La adición de $http.defaults.useXDomain = true no cambiar nada.
InformationsquelleAutor Jason | 2013-05-21

4 Kommentare

  1. 51

    Esto es probablemente debido a que el comportamiento predeterminado de Angular para incluir el encabezado de solicitud 'X-Requested-With', que puede causar problemas con CORS. Esto fue corregido en v 1.1.1 (la rama inestable – ver v1.1.1 correcciones de errores) mediante la eliminación de la cabecera de la cruz de dominio de solicitudes: https://github.com/angular/angular.js/issues/1004.

    Es fácil quitar el encabezado y esta trabajando en la rama 1.0. La siguiente línea va a quitar el encabezado de todas las solicitudes (no sólo CORS), hecho por $servicio http en su aplicación:

    yourModule
      .config(function($httpProvider){
        delete $httpProvider.defaults.headers.common['X-Requested-With'];
    });

    Actualización
    Una pequeña advertencia – Angular (como jQuery) no admite CORS para IE9. IE10 es el primer navegador IE que soporta CORS. Esta publicación de blog describe cómo usted puede conseguir el apoyo CORS en IE8/IE9 bajo ciertas condiciones, pero no funciona con el Angular $servicio http: http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx

  2. 2

    web.config

    <system.webServer> 
    <httpProtocol>
         <customHeaders>
           <add name="Access-Control-Allow-Origin" value="*" />
         </customHeaders>
       </httpProtocol>
      </system.webServer>
  3. 0

    La respuesta anterior resuelto el problema.

    <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="*" />
         </customHeaders>
    </httpProtocol>

    Cuando una página HTML se llama a un angular de controlador con un servicio como:

    $http.get(dataUrl).success(function (data) {
         $scope.data.products = data;
    })
    .error(function (error) {
        $scope.data.error = error;
    });
  4. 0

    Solicitado encabezados tiene que ser fijado en el lado del servidor.
    Hay muchas maneras en la configuración de este

    1.Uno puede ser

     <filter>
       <filter-name>ResponseFilter</filter-name>
       <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
     </filter>
     <filter-mapping>
       <filter-name>ResponseFilter</filter-name>
       <url-pattern>/*</url-pattern>
     </filter-mapping>

    2.Independiente de que el servidor puede desarrollar una clase personalizada que puede ser pasado como parámetro init jersey servlet

    com.sol.jersey.spi.contenedor.ContainerResponseFilters
    los ayudantes.TestCorpsFilter
    enter code here
    `public class TestCorpsFilter implementa ContainerResponseFilter {

        @Override
        public ContainerResponse filter(ContainerRequest arg0, ContainerResponse arg1) {
            ResponseBuilder resp = Response.fromResponse(arg1.getResponse());
            resp.header("Access-Control-Allow-Origin", "*").header("Access-Control-Allow-Methods",
                    "GET, POST, OPTIONS");
    
            String requestHeader = arg0.getHeaderValue("Access-Control-Request-Headers");
    
            if (requestHeader != null && !requestHeader.equals("")) {
                resp.header("Access-Control-Allow-Headers", requestHeader);
            }
    
            arg1.setResponse(resp.build());
            return arg1;
    
        }

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea