Angular2 RESTO de solicitud de código de estado HTTP 401 cambia a 0

Estoy desarrollando un Angular2 aplicación. Parece que cuando mi token de acceso expira el 401 código de Estado HTTP que se cambia a un valor de 0 en el objeto de Respuesta. Estoy recibiendo 401 no autorizado sin embargo, la Respuesta de ERROR de objeto tiene un estado de 0. Esto me impide la interceptación de un error 401 y el intento de actualizar el token. Cuál es la causa de la 401 código de estado HTTP que se transforma en código de estado HTTP de 0?

Aquí la captura de pantalla de Firefox consola:

Angular2 RESTO de solicitud de código de estado HTTP 401 cambia a 0

Aquí está mi código:

get(url: string, options?: RequestOptionsArgs): Observable<any> 
{
    //console.log('GET REQUEST...', url);

    return super.get(url, options)
        .catch((err: Response): any =>
        {
            console.log('************* ERROR Response', err);

            if (err.status === 400 || err.status === 422)
            {
                return Observable.throw(err);
            }
            //NOT AUTHENTICATED
            else if (err.status === 401)
            {                   
                this.authConfig.DeleteToken();
                return Observable.throw(err);
            }               
            else
            {
                //this.errorService.notifyError(err);
                //return Observable.empty();
                return Observable.throw(err);
            }
        })
        //.retryWhen(error => error.delay(500))
        //.timeout(2000, new Error('delay exceeded'))
        .finally(() =>
        {
            //console.log('After the request...');
        });
}

Este código se encuentra en un personalizado servicio http que se extiende Angular2 del HTTP para que yo pueda interceptar errores en un solo lugar.

En Google Chrome, me sale este mensaje de error:

XMLHttpRequest no se puede cargar https://api.cloudcms.com/repositories/XXXXXXXXXXXXXXXX/branches/XXXXXXXXXXXXXXXX/nodesXXXXXXXXXXXXXXXX. No ‘Access-Control-Allow-Origin’ encabezado presente en el recurso solicitado. Origen ‘http://screwtopmedia.local.solutiaconsulting.com‘ es, por tanto, no se permite el acceso. La respuesta ha de código de estado HTTP 401.

Esto es confuso porque estoy incluido en el ‘Access-Control-Allow-Origin’ el encabezado en la solicitud.

Aquí una imagen de los resultados recibidos en Google Chrome:

Angular2 RESTO de solicitud de código de estado HTTP 401 cambia a 0

He intentado acceder «WWW-Authenticate’ Encabezado de Respuesta como un medio para interceptar el 401. Sin embargo, el código siguiente devuelve un valor NULL:

err.headers.get("WWW-Authenticate")

Es desconcertante que me estoy poniendo un CORS tema porque me estoy haciendo CORS errores cuando un token de acceso válido es proporcionado.

¿Cómo puedo trampa para 401 código de estado HTTP? ¿Por qué es de 401 código de estado HTTP de ser cambiado a 0?

Gracias por tu ayuda.

  • Si cloudcms.com hacer para no configurar el Access-Control-Allow-Origin en 401 respuesta, entonces nada se puede hacer mucho. Usted tiene que abrir ticket de soporte con ellos para confirmar si que es un comportamiento normal. javascript en los navegadores(FF, Chrome & Safari) que he probado no recibir ninguna información si CORS de error se producen, aparte de estado de 0. Angular2 no tiene el control de la misma.
  • ¿puedes resolver el problema? Quiero decir que en el caso de que el servidor no enviar corrige el código, pero en el chrome consola que ver 401, pero angulares sigue dando 0 como estado ?
InformationsquelleAutor Tom Schreck | 2016-08-17

7 Kommentare

  1. 5

    Yo trabajo para la Nube de la CMS. Puedo confirmar que hemos configurado correctamente CORS encabezados en llamadas a la API. Sin embargo, para las respuestas 401 los encabezados no se establece correctamente. Esto ha sido resuelto y la solución estará disponible en la API pública a finales de esta semana.

    Por CIERTO, si usted utiliza nuestro código javascript conductor https://github.com/gitana/gitana-javascript-driver, en lugar de escribir la API directamente, entonces la re-auth flujo se controla de manera automática y no necesita trampa 401 errores en todos.

  2. 19

    El problema está relacionado con CORS solicitudes, ver este github problema

    No ‘Access-Control-Allow-Origin’ encabezado presente en la solicitada
    recursos

    significa que 'Access-Control-Allow-Origin' se requiere en los encabezados de respuesta.

    Angular no está recibiendo ningún códigos de estado, por eso es que le da un 0 que es causada por el navegador no permite la xml parser para analizar la response debido a la no válido headers.

    Necesita añadir correcta CORS encabezados a su error response así como success.

    • así, la respuesta de la 3ª parte de la fuente de necesidades ‘Access-Control-Allow-Origin’ en los encabezados demasiado? Lo he añadido con mi petición.
    • Este código de estado es aún extraño para ser honesto, ¿por qué habría de Google dicen que es un CORS solicitud problema y no de Firefox ?
    • no es firefox porque me sale el mismo problema en Google Chrome
    • exactamente
  3. 6

    Si cloudcms.com hacer para no establecer la Access-Control-Allow-Origin en 401 respuesta, entonces nada se puede hacer mucho. Usted tiene que abrir ticket de soporte con ellos para confirmar si que es un comportamiento normal.

    javascript en los navegadores(FF, Chrome & Safari) que he probado no recibir ninguna información si CORS de error se producen, aparte de estado de 0. Angular2 no tiene el control de la misma.


    He creado una sencilla prueba y obtener el mismo resultado como el tuyo:

    geturl() {
        console.log('geturl() clicked');
        let headers = new Headers({ 'Content-Type': 'application/xhtml+xml' });
        let options = new RequestOptions({ 'headers': headers });
        this.http.get(this.url)
            .catch((error): any => {
                console.log('************* ERROR Response', error);
                let errMsg = (error.message) ? error.message :
                    error.status ? `${error.status} - ${error.statusText}` : 'Web Server error';
                return Observable.throw(error);
            })
            .subscribe(
            (i: Response) => { console.log(i); },
            (e: any) => { console.log(e); }
            );
    }
    

    Después de mucho buscar en google, he encontrado la siguiente(https://github.com/angular/angular.js/issues/3336):

    lucassp comentado Ago 19, 2013

    He encontrado el problema por un tiempo ahora, pero se me olvidó publicar aquí una respuesta. CADA respuesta, incluso el Error 500, debe tener el CORS encabezados adjunta. Si el servidor no conecte el CORS encabezados para el Error 500 respuesta, a continuación, el Objeto XHR no analizarlo, por lo tanto el Objeto XHR no tienen ninguna respuesta de su cuerpo, de estado, o de cualesquiera otros datos de respuesta en el interior.

    Resultado de Firefox monitor de red parece apoyar la por encima de la razón.

    Javascript solicitud recibirá respuesta vacía.
    Angular2 RESTO de solicitud de código de estado HTTP 401 cambia a 0

    Llanura solicitud de url(copy&pegar el enlace en la barra de direcciones) se obtiene la respuesta del cuerpo
    Angular2 RESTO de solicitud de código de estado HTTP 401 cambia a 0

    Javascript uso XHRHttpRequest para la comunicación http.

    Cuando un XHR respuesta llegue, el navegador proceso de la cabecera, que es la razón por la que usted verá los 401 de mensajes de la red. Sin embargo, si el XHR respuesta es de un host diferente, a continuación, el javascript Y el encabezado de respuesta no contienen CORS encabezado(por ejemplo,Access-Control-Allow-Origin: *), el navegador no va a pasar ninguna información de regreso a la XHR capa. Como resultado, la respuesta del cuerpo será completamente vacías y no de estado(0).

    He probado con FF 48.0.1, Chrome 52.0.2743.116 y Safari 9.1.2, y todos ellos tienen el mismo comportamiento.

    Utilizar el navegador de monitor de red para comprobar la respuesta de cabecera para aquellos 401 Unauthorized entradas, es muy probable que no haya ningún Access-Control-Allow-Origin encabezado y causando el problema. Esto puede ser un error, o de diseño, en el proveedor de servicios secundarios.

    Access-Control-Allow-Origin es una respuesta que sólo el encabezado http. Para obtener más información de https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#The_HTTP_response_headers

  4. 2

    Según W3C, si el estado atributo se establece en 0, esto significa que:

    • El estado no enviados o ABIERTO.

    o

    • El indicador de error se establece.

    Creo que esto no es un Angular2 problema, parece que su solicitud tiene un problema.

    • interesante. ¿Cómo se puede solucionar este problema?
    • la solicitud se envían al RESTO de la URL porque estoy recibiendo 401 del código de estado. Puedo ver 401 no autorizado en los resultados. Pero cuando llego a la respuesta, el código de estado es 0. Así, un sin ENVIAR el estado no parece correcto.
    • En mi caso – Angular nunca llega esta petición – es bloqueado por el navegador debido a la falta de CORS atributos devueltos con error.
  5. 2

    Debe utilizar una 3ra parte del protocolo http monitor (como CharlesProxy) en lugar de Chrome dev tools para confirmar que los encabezados son en realidad de ser enviado a la API de servicio y si se está volviendo un plan 401.

    • gracias por la respuesta. Estoy usando el Cartero, como bien pueden ver 401 no autorizado de estado devuelto de la 3ª parte de las llamadas a la API en la presentación de un token caducado. Así que, no creo que el problema es con el servicio de 3 ª parte. Parece que la respuesta de error del objeto de estado de error es llegar cambiado de 401 a 0 en algún lugar en el interior de Angular2.
  6. 1

    Tuve el mismo problema y era debido a que el servidor no envía la respuesta correcta (aunque el registro de la consola, dijo un 401 del error Angular había estado 0). Mi servidor Tomcat con la aplicación Java utilizando Spring MVC y Spring Security.

    Ahora está trabajando utilizando siguientes opciones de configuración:

    SecurityConfig.java

    ...
    protected void configure(HttpSecurity http) throws Exception {
    ....
        http.exceptionHandling()
                .accessDeniedHandler(accessDeniedHandler)
                .authenticationEntryPoint(authenticationEntryPoint);
        //allow CORS option calls
        http.authorizeRequests().antMatchers(HttpMethod.OPTIONS, "/**").permitAll();
     ...
    

    SomeAuthenticationEntryPoint.java

    @Component
    public class SomeAuthenticationEntryPoint implements AuthenticationEntryPoint {
    
      @Override
      public void commence(HttpServletRequest request, HttpServletResponse response, AuthenticationException authException) throws IOException, ServletException {
        HttpStatus responseStatus = HttpStatus.UNAUTHORIZED;
        response.sendError(responseStatus.value(), responseStatus.getReasonPhrase());
        }
    }
    

    web.xml

    <error-page>
        <error-code>403</error-code>
        <location>/errors/unauthorised</location>
    </error-page>
    <error-page>
        <error-code>401</error-code>
        <location>/errors/unauthorised</location>
    </error-page>
    

    Controlador para manejar los errores //… previamente definido

    @RestController
    @RequestMapping("/errors")
    public class SecurityExceptionController {
    
        @RequestMapping("forbidden")
        public void resourceNotFound() throws Exception {
            //Intentionally empty
        }
    
        @RequestMapping("unauthorised")
        public void unAuthorised() throws Exception {
            //Intentionally empty
            }
    
        }
    }
    
    • gracias por la respuesta. El servicio me estoy consumiendo es un servicio de 3 ª parte. Así que, no tengo control sobre/acceso a su servidor. Alguna idea de por qué puedo ver 401 código de estado de la consola, sin embargo, el objeto de error Angular tiene el código de estado de 0? Esto habla de la cuestión de que se Angular y no en el servidor.
  7. 0

    Topé con este artículo:

    Lo que sucede, en mi caso fue que:

    • Me estaba pidiendo RESTO de diferente dominio
    • El recurso devuelto 401, pero no había «Access-Control-Allow-Origin» situado en la respuesta de error.
    • Chrome (o navegador) recibió 401 y mostró en la pestaña de la red (Ver más abajo count : 401), pero nunca pasó a Angular

    Angular2 RESTO de solicitud de código de estado HTTP 401 cambia a 0

    • ya que no había CORS permitido (falta de «Access-Control-Allow-Origin» encabezado) – Chrome no podía dejar pasar esta respuesta en Angular. De esta manera pude ver 401 en el Chrome pero no en Angular.

    • Solución fue sencilla (que se extiende en TimothyBrake la respuesta) – para añadir la falta de encabezado en la respuesta de error. En la Primavera de inicio me pone: response.addHeader("Access-Control-Allow-Origin", "*"); y yo estaba resuelto.

    @Component
    public class JwtUnauthorizedResponseAuthenticationEntryPoint
      implements AuthenticationEntryPoint {
      @Override
      public void commence(HttpServletRequest request, HttpServletResponse response,
              AuthenticationException authException) throws IOException {
    
          response.addHeader("Access-Control-Allow-Origin", "*"); 
          response.sendError(HttpServletResponse.SC_UNAUTHORIZED,
                  "You would need to provide the Jwt Token to Access This resource");
      }
    }
    

    PS: asegúrese de que el frijol se proporciona en HttpSecurity config en su WebSecurityConfigurerAdapter. Se refieren a: https://www.baeldung.com/spring-security-basic-authentication en caso de duda.

    Espero que esto ayude.

Kommentieren Sie den Artikel

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

Pruebas en línea