angularangular-httpclientcustom-headerscsrf-token

angular 5 httpclient , on post , the response does not return custom headers, only returns response object


I'm not getting the actual http headers when making the http post call using Angular 5 common httpClient. I'm passing observe: 'response' in request to get the full response (by default httpClient returns only the body in response).

I want to read the csrftoken value from http header response. I can see that csrftoken is available in response headers using chrome browser network view.

But the same is not available when I read the httpClient response in Angular.

 post(inURL, data, config = undefined) {
    let headers, options;
    if (config){
        options = config;
    } else {
        //headers = this.getDefaultHeader();
        //options = new RequestOptions({ headers: headers });
        options = httpOptions;
    }
    options = { ...options, observe: 'response' };

    let action = this.httpService.post(inURL, data, options);
    return new Promise((resolve, reject) => {
        action.subscribe(
            response => resolve(response),
            error => {
                this.interceptError(error);
                reject(error);
            }
        );
    });

    } enter image description here

and the response headers object looks like this while debugging on chrome debugger, as you see the csrftoken is not available as a key on the response object

enter image description here

Here is what i have for accessing the httpheaders

   let headers: HttpHeaders = response.headers;
    if (headers && headers['csrftoken']) {
        let token: String = headers.get('csrftoken');
    }

Solution

  • As already suggested in the comments you cannot check if a header exists the way you are doing it. You need to use the has method. Your code should look like this:

    let headers: HttpHeaders = response.headers;
    if (headers && headers.has('csrftoken')) {
       let token: String = headers.get('csrftoken');
    }