Angular2 httponly cookie not saved when adding custom http headers

Question

I've came to dead end with implementing and handling CORS issues between Angular2 application and Java backend API.

I am aware and know what are CORS requests, have implemented already in angular1 apps, but I can't make it work in Angular2 (Ionic2) app.

The ionic 2 app should consume an existing API web service, which already have enabled everything for making CORS requests and the authentication is done with Http only cookie... already implemented in Angular 1.

For some reason when we are setting headers in the request, Angular2 set " withCredentials " flag to false or not send at all, and the request is made to the api but the cookie is not returned... and we can't make authenticated API calls. I've tried many, many things to send together http headers and "withCredentials" flag together, but nothing seems to work in Angular2, while in Angular1 works fine. All headers that we are sending are allowed by the server and they are returned in "Access-Control-Allow-Headers" in the response.

Funny thing is that if I try to send requests with "withCredentials" only flag, the requests are send ok and the cookie is set correctly by the browser.

I've tried following things:

1. Create custom http class, like described here: http://www.adonespitogo.com/articles/angular-2-extending-http-provider/

2. Extending the like BrowserXhr class and setting "withCredentials" to true like described here: Angular 2 - http get withCredentials

3. Setting directly in the RequestOptions like here: angular 2 http withCredentials

4. Extend BaseRequestOptions (RequestOptions) like here: Angular2 - set headers for every request

Example Code:

import { Injectable } from '@angular/core';
import { Headers, RequestOptions } from '@angular/http';

@Injectable()
export class DefaultRequestOptions extends RequestOptions {

    withCredentials:boolean = true;

    // headers:Headers = new Headers({
    //     'Accept': 'application/json, text/plain, */*',
    //     'Authorization': 'sometoken',
    // });

    constructor() {
        super();
        if(!this.headers){
            this.headers = new Headers();
        }

         this.headers = new Headers();
         this.headers.append('Accept','application/json');
         this.headers.append('CustomHeader',"someTokenGoesHere");

        this.withCredentials = true;
    }
}

Later in module:

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    IonicModule.forRoot(MyApp,{tabsHideOnSubPages:true})
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    { provide: RequestOptions, useClass: DefaultRequestOptions } 
  ]
})

Also tried like this:

let headers = new Headers();
headers.append("Accept",'application/json');
headers.append("CustomHeader",'someTokenGoesHere');

let options = new RequestOptions({ headers: headers, withCredentials: true});

this.http.get('apiurl',options).subscribe((res)=>{ console.log(res)})

If anyone has successfully combined http headers and withCredentials flag, please share your experience.

UPDATE: I didn't found solution for this problem, so we decided to remove some security headers and make ip address filtering for requests. In this way we don't need to send any extra http headers and continue using httponly cookies.

Answer 1

You can add headers in options object of the http request

let headers: Headers = new Headers({
  'Content-Type': 'application/x-www-form-urlencoded'
});
let options = {
  method: RequestMethod.Post,
  headers: headers,
  responseType: ResponseContentType.Blob,
  withCredentials: true
};

return this.http
  .post(API + `/user/${id}`, {}, options)
  .map((r: Response) => {

  });