angular4 httpclient csrf no envía x-xsrf-token

En la documentación angular, se menciona que el httpclient angular httpclient automáticamente el valor de la cookie XSRF-TOKEN en el encabezado X-XSRF-TOKEN de la solicitud posterior. Enlace de documentación

Pero no envía el encabezado para mí. Aquí está mi código

Código Nodejs para configurar la cookie

 router.get('/set-csrf',function(req,res,next){ res.setHeader('Set-Cookie', "XSRF-TOKEN=abc;Path=/; HttpOnly; SameSite=Strict"); res.send(); }) 

He utilizado httpclient en app.module.ts

 imports: [ HttpClientModule ] 

** El código anterior es solo para fines de depuración. No tengo un punto final set-csrf.

Pero no envía ningún encabezado cuando envío una solicitud posterior. No puedo depurar

También he agregado el problema en el repository github de angular. HttpXsrfInterceptor comprueba si la solicitud es GET o HEAD, o si comienza con http. Si es verdadero, omite agregar el encabezado.

Aquí está el código en la clase HttpXsrfInterceptor

 intercept(req: HttpRequest, next: HttpHandler): Observable<HttpEvent> { const lcUrl = req.url.toLowerCase(); // Skip both non-mutating requests and absolute URLs. // Non-mutating requests don't require a token, and absolute URLs require special handling // anyway as the cookie set // on our origin is not the same as the token expected by another origin. if (req.method === 'GET' || req.method === 'HEAD' || lcUrl.startsWith('http://') || lcUrl.startsWith('https://')) { return next.handle(req); } const token = this.tokenService.getToken(); // Be careful not to overwrite an existing header of the same name. if (token !== null && !req.headers.has(this.headerName)) { req = req.clone({headers: req.headers.set(this.headerName, token)}); } return next.handle(req); } 

No estoy seguro de por qué se saltaron la parte de http / s. Aquí está mi problema en github

Lo que estás buscando es HttpClientXsrfModule .

Por favor, lea más sobre esto aquí: https://angular.io/api/common/http/HttpClientXsrfModule .

Tu uso debería ser así:

 imports: [ HttpClientModule, HttpClientXsrfModule.withConfig({ cookieName: 'My-Xsrf-Cookie', // this is optional headerName: 'My-Xsrf-Header' // this is optional }) ] 

Además, si su código se dirige a la API a través de una URL absoluta, el interceptor CSRF predeterminado no funcionará de la caja. En su lugar, debe implementar su propio interceptor que no ignora las rutas absolutas.

 @Injectable() export class HttpXsrfInterceptor implements HttpInterceptor { constructor(private tokenExtractor: HttpXsrfTokenExtractor) { } intercept(req: HttpRequest, next: HttpHandler): Observable> { const headerName = 'X-XSRF-TOKEN'; let token = this.tokenExtractor.getToken() as string; if (token !== null && !req.headers.has(headerName)) { req = req.clone({ headers: req.headers.set(headerName, token) }); } return next.handle(req); } } 

Y finalmente agréguela a sus proveedores:

 providers: [ { provide: HTTP_INTERCEPTORS, useClass: HttpXsrfInterceptor, multi: true } ] 

Supongo que el método correcto es withOptions . Utilicé conConfig y obtuve el error. La Property 'withConfig' does not exist on type 'typeof HttpClientXsrfModule'. Este es un problema de tipeo en la documentación. Necesita utilizar “withOptions” en lugar de HttpClientXsrfModule.withOptions({ cookieName: 'My-Xsrf-Cookie', headerName: 'My-Xsrf-Header', })

Usando la reciente versión Angular, encontré el siguiente problema. Mientras el token se pasa al cliente usando el nombre del encabezado ‘XSRF-TOKEN’, la respuesta debe retroalimentar el token usando el nombre del encabezado ‘X-XSRF-TOKEN’. Así que aquí hay una versión ligeramente modificada del código de Miroslav arriba que funciona para mí.

 @Injectable() export class HttpXSRFInterceptor implements HttpInterceptor { constructor(private tokenExtractor: HttpXsrfTokenExtractor) { } intercept(req: HttpRequest, next: HttpHandler): Observable> { const headerName = 'XSRF-TOKEN'; const respHeaderName = 'X-XSRF-TOKEN'; let token = this.tokenExtractor.getToken() as string; if (token !== null && !req.headers.has(headerName)) { req = req.clone({ headers: req.headers.set(respHeaderName, token) }); } return next.handle(req); } }