navigationend - router events subscribe angular 4
Angular 4: configuración con credenciales en cada solicitud: cookie de cors (2)
Otra forma quizás más simple es crear tu propio ApiService . Se usaría un HttpClient inyectado. Todas las solicitudes de XHR utilizarían ApiService en lugar de HttpClient directamente.
Aquí hay una implementación de ejemplo:
Algunos de los códigos que he modificado:
@Injectable()
export class ApiService {
private httpOptions = {
headers: new HttpHeaders({ ''Content-Type'': ''application/json'' }),
withCredentials: true // to allow cookies to go from "https://localhost:4567" to "http://localhost:5678"
};
constructor(
private http: HttpClient
) { }
private formatErrors(error: any) {
return throwError(error.error);
}
get(path: string, params: HttpParams = new HttpParams()): Observable<any> {
return this.http.get(`${environment.api_url}${path}`, { params })
.pipe(catchError(this.formatErrors));
}
put(path: string, body: Object = {}): Observable<any> {
return this.http.put(
`${environment.api_url}${path}`,
JSON.stringify(body),
this.httpOptions
).pipe(catchError(this.formatErrors));
}
post(path: string, body: Object = {}): Observable<any> {
return this.http.post(
`${environment.api_url}${path}`,
JSON.stringify(body),
this.httpOptions
).pipe(catchError(this.formatErrors));
}
Mi cliente angular está separado del backend y he habilitado cors en el backend, todo funciona bien, excepto el hecho de que mi autenticación falla porque la cookie no se agrega a las solicitudes.
Después de buscar en línea, encontré que debería establecer {withCredentials : true} en cada solicitud http. Me las arreglé para hacerlo en una sola solicitud y funciona, pero no en todas las solicitudes.
Intenté usar BrowserXhr ¿Cómo enviar "Cookie" en el encabezado de solicitud para todas las solicitudes en Angular2? pero no funciona y también está en desuso.
También probé RequestOptions pero no funcionó.
¿Qué puedo hacer para configurar {withCredentials: true} en cada solicitud http?
Edición posterior:
@Injectable()
export class ConfigInterceptor implements HttpInterceptor {
constructor(private csrfService: CSRFService) {
}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
let token = this.csrfService.getCSRF() as string;
const credentialsReq = req.clone({withCredentials : true, setHeaders: { "X-XSRF-TOKEN": token } });
return next.handle(credentialsReq);
}
}
Puedes usar un HttpInterceptor .
@Injectable()
export class CustomInterceptor implements HttpInterceptor {
constructor() {
}
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
request = request.clone({
withCredentials: true
});
return next.handle(request);
}
}
A continuación tienes que proporcionarlo:
@NgModule({
bootstrap: [AppComponent],
imports: [...],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: CustomInterceptor ,
multi: true
}
]
})
export class AppModule {}