angular: HttpClient POST withCredentials=true does not send cookies with Content-Type=application/json

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X ] Bug report  
[ ] Performance issue
[ ] 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
[ ] Other... Please describe:

Current behavior

HttpClient POST with Content-Type=“application/x-www-form-urlencoded”, withCredentials=true sends Cookies:

Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-NZ,en-GB;q=0.9,en-US;q=0.8,en;q=0.7
Connection: keep-alive
Content-Length: 44
Content-Type: application/x-www-form-urlencoded
Cookie: JSESSIONID=713DE1846CC03594F0AA2EEC3C6BE290
Host: localhost:8080
Origin: http://localhost:4200
Referer: http://localhost:4200/
User-Agent: Mozilla/5.0 (X11; FreeBSD amd64; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36

BUT HttpClient POST with Content-Type=“application/json”, withCredentials=true does not:

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-NZ,en-GB;q=0.9,en-US;q=0.8,en;q=0.7
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Connection: keep-alive
Host: localhost:8080
Origin: http://localhost:4200
User-Agent: Mozilla/5.0 (X11; FreeBSD amd64; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36

Expected behavior

HtmlClient POST should always send Cookies if withCredentials=true is set.

Minimal reproduction of the problem with instructions

I am developing an application on Angular 6, which talks to a backend running a SpringFramework based server on localhost:8080. A login POST submission works, with:

const httpPostOptions =
{   
    headers:
        new HttpHeaders (
        {   
            "Content-Type": "application/x-www-form-urlencoded"
        }),
    withCredentials: true,
};

Subsequent HttpClient GET requests work as expected, with

const httpGetOptions =
{   
    withCredentials: true,
};

However, HttpClient POST requests all fail, with:

const httpPostOptions =
{   
    headers:
        new HttpHeaders (
        {   
            "Content-Type": "application/json"
        }),
    withCredentials: true,
}

with the error reported:

Failed to load http://localhost:8080/mezo/api/profile/update: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 403.

The CORS configuration has been set up correctly on the SpringFramework backend, as the initial login succeed as expected, and Angular does set the cookies, as all GET operations work. It is only POST operations that do not succeed. Chrome reports that the headers sent to localhost:8080 do not include the cookies (as included above).

Environment

Angular version: 6.0.3

Browser:
- [X] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v10.3.0
- Platform:  FreeBSD

Others: