Repository: angular
Issue: HttpClient does not set X-XSRF-Token on Http Post
Labels: type: bug/fix,freq2: medium,area: common/http,type: confusing,P3

<!--
PLEASE HELP US PROCESS GITHUB ISSUES FASTER BY PROVIDING THE FOLLOWING INFORMATION.

ISSUES MISSING IMPORTANT INFORMATION MAY BE CLOSED WITHOUT INVESTIGATION.
-->

## I'm submitting a...
<!-- Check one of the following options with "x" -->
<pre><code>
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ X] Bug report  <!-- Please search GitHub for a similar issue or PR before submitting -->
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre>

## Current behavior
<!-- Describe how the issue manifests. -->

Updated to angular 5.0.2. Updated from the deprecated HttpModule (@angular/http) to HttpClientModule (@angular/common/http).

Updated Http.post to HttpClient.post and tested.  X-XSRF-TOKEN was not present in the Http Header.

HttpClient (@angular/common/http) does not set X-XSRF-Token on Http Post, while Http (@angular/http) does.



## Expected behavior
<!-- Describe what the desired behavior would be. -->
HttpClient should set the X-XSRF-TOKEN on Http Post.

## Minimal reproduction of the problem with instructions
<!--
For bug reports please provide the *STEPS TO REPRODUCE* and if possible a *MINIMAL DEMO* of the problem via
https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).
-->

Verify that javascript XSRF-TOKEN cookie has been set.

Test HttpClient (@angular/http) and HttpClientModule (@angular/common/http) side by side with nearly identical Http post requests.
<pre><code>
//OLD
        CreateOld(sample: Models.Sample): Observable<Models.Sample[]> {
            let body = JSON.stringify(sample);
            let headers = new Headers({ 'Content-Type': 'application/json' });
            return this.http
                .post(this.baseUrl + 'api/sample/Create', body, { headers: headers })
                .map(response => { return response.json() as Models.Task[] });
        }
//NEW
	 CreateNew(sample: Models.Sample): Observable<Models.Sample[]> {
			let body = JSON.stringify(sample)
			return this.httpClient
				.post<Models.Task[]>(this.baseUrl + 'api/sample/Create', body, { headers: new HttpHeaders().set('Content-Type', 'application/json') });
        }
</code></pre>

## What is the motivation / use case for changing the behavior?
<!-- Describe the motivation or the concrete use case. -->


## Environment

<pre><code>
Angular version: 5.0.2
<!-- Check whether this is still an issue in the most recent Angular version -->

Browser:
- [ X] Chrome (desktop) version 62.0.3202.94 
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [X ] Edge version 41.16299.15.0
 
For Tooling issues:
- Node version: XX  <!-- run `node --version` -->
- Platform:  <!-- Mac, Linux, Windows -->

Others:
<!-- Anything else relevant?  Operating system version, IDE, package manager, HTTP server, ... -->
</code></pre>