navigationend - router events subscribe angular 4

La autenticación básica angular 2 no funciona

Question

Estoy intentando conectar / hacer una solicitud POST a una API con Angular2, es una API muy simple con una contraseña de autenticación básica. Al deshabilitar la contraseña en la api todo funciona como se esperaba. Pero cuando habilito la Autenticación Angular Básica ya no puedo conectarme a la API. En Cartero todo funciona. Intenté lo siguiente sin éxito.

Tengo dos encabezados "Tipo de contenido" y "Autorización"

headers.append("Content-Type", "application/x-www-form-urlencoded");

He intentado estos dos encabezados.

headers.append("Authorization", "Basic " + btoa(Username + ":" + Password)); 
headers.append("Authorization", "Basic VXNlcm5hbWU6UGFzc3dvcmQ=");

Lo único que puedo encontrar es que en los encabezados de solicitud RAW solo hay una línea con los nombres de encabezado pero faltan los valores:

Access-Control-Request-Headers: authorization, content-type

Cabeceras en bruto:

#Request Headers
OPTIONS /shipment HTTP/1.1
Host: api.example.com
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://localhost:4200
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36
Access-Control-Request-Headers: authorization, content-type
Accept: */*
Referer: http://localhost:4200/address
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8,nl;q=0.6

Espero que alguien pueda ayudar

Answer 1

El problema es con el servidor backend. Cualquier navegador envía una solicitud de verificación previa haciendo una solicitud de origen cruzado. El servidor backend en este caso no está manejando la solicitud de verificación previa con éxito. Intente hacer la configuración de cors en el servidor backend. Eso resolverá este problema.

Answer 2

Esto resolvió mis problemas:
Angular2 http post - ¿Cómo enviar el encabezado de autorización?

De acuerdo. He encontrado problema

No estaba en el lado angular. Para ser honesto, no hubo ningún problema en absoluto.

La razón por la que no pude realizar mi solicitud con éxito fue que la aplicación de mi servidor no estaba manejando correctamente la solicitud de OPCIONES.

¿Por qué OPCIONES, no POST? Mi aplicación de servidor está en un host diferente, luego frontend. Debido a CORS, mi navegador estaba convirtiendo POST en OPCIÓN: http://restlet.com/blog/2015/12/15/understanding-and-using-cors/

Con la ayuda de esta respuesta: Spring OAuth2 JWT Authorization Server + CORS independiente

Implementé el filtro adecuado en mi aplicación del lado del servidor.

Gracias a @Supamiu, la persona que me señaló que no estoy enviando POST en absoluto.

Answer 3

Tuve el mismo problema en mi aplicación.

Como puede ver, la solicitud que se envía no es POST sino OPCIÓN (verificación previa)

https://developer.mozilla.org/fr/docs/HTTP/Access_control_CORS

Debe permitir la solicitud de OPCIONES en su API. Si tiene la aplicación Spring, puede agregar esto a la configuración de Spring Security:

    protected void configure(HttpSecurity http) throws Exception {
        http.csrf().disable()
                .authorizeRequests()
                **.antMatchers(HttpMethod.OPTIONS, "/**").permitAll()**
(..)

}

En mi caso funciona

Answer 4

Versión simplificada para agregar encabezados personalizados a su solicitud:

import {Injectable} from ''@angular/core'';
import {Http, Headers} from ''@angular/http'';

@Injectable()
export class ApiService {

   constructor(private _http: Http) {}

   call(url): Observable<any> {
      let username: string = ''username'';
      let password: string = ''password'';
      let headers: Headers = new Headers();
      headers.append("Authorization", "Basic " + btoa(username + ":" + password)); 
      headers.append("Content-Type", "application/x-www-form-urlencoded");
      return this._http.post(url, data, {headers: headers})
    }
}

Es difícil determinar dónde se equivocó, debido a la falta de código de la llamada http real que hace. Pero este ejemplo debería funcionar para usted

Answer 5

jrcastillo sugirió otra opción here

Pasé tantas horas tratando de solucionar este problema y este liner resolvió mi problema.

@Override
public void configure(WebSecurity web) throws Exception {
    web.ignoring().antMatchers(HttpMethod.OPTIONS, "/**");
}

Fui un poco más específico al final, ya que esto afectó mi ruta / login , así que hice lo siguiente:

@Override
public void configure(WebSecurity web) throws Exception {
    web.ignoring().antMatchers(HttpMethod.OPTIONS, "/api/**");
}