Angular 5 xsrf-token cookie and x-xsrf-header are not same

Question

I am changing xsrf-token cookie value on each request at backend. I am making more than one http calls at a time to server, but for some requests "xsrf-cookie" value and "x-xsrf-header" value are not same.

I tried to add x-xsrf-header manually through paramaters, But the header value is not upto date.

Here is the code I tried,

this.http.post<any>(route, paramas, {
      headers: new HttpHeaders({
        'X-XSRF-TOKEN': this.cookieService.get("XSRF-TOKEN"),
      })
 })

Please find the below image. Please help. Thank you in advance.

Answer 1

It's probably a race condition, it takes time for the browser to get/set cookies, and also for Angular to set headers. For most purposes it's enough and way easier to just have a csrf token for the whole user session (not a different one for each request).