angular2 xhrfields withcredentials true

Question

I am trying to login to a system. In angular 1, there was ways to set

withCredentials:true

But I could not find a working solution in angular2

export class LoginComponent {
    constructor(public _router: Router, public http: Http, ) {

    }


    onSubmit(event,username,password) {
        this.creds = {'Email': '[e-mail]','Password': '01010','RememberMe': true}
        this.headers = new Headers();
        this.headers.append('Content-Type', 'application/json');

        this.http.post('http://xyz/api/Users/Login', {}, this.creds)
              .subscribe(res => {
                  console.log(res.json().results);

              });
     }

}

Answer 1

AFAIK, right now (beta.1) the option is not available.

You have to work around it with something like this:

let _build = http._backend._browserXHR.build;

http._backend._browserXHR.build = () => {
  let _xhr =  _build();
  _xhr.withCredentials = true;
  return _xhr;
};

Answer 2

In Angular > 2.0.0 (and actually from RC2 on), just

http.get('http://my.domain.com/request', { withCredentials: true })

Answer 3

I think you don't use the post metrhod the right way. You could try something like that:

onSubmit(event,username,password) {
  this.creds = {
    'Email': '[e-mail]',
    'Password': '01010','RememberMe': true
  }

  this.headers = new Headers();
  this.headers.append('Content-Type', 'application/json');

  this.http.post('http://xyz/api/Users/Login', 
                 JSON.stringify(this.creds),
                 { headers: headers });
}

You invert parameters. The second parameter corresponds to the content to send into the POST and should be defined as string. Objects aren't supported yet at this level. See this issue: https://github.com/angular/angular/issues/6538.

If you want to set specific headers, you need to add the Headers object within the third parameter of the post method.

Otherwise, I think the withCredentials property is related to CORS if you want to send cookies within cross domain requests. You can have a look at this link for more details:

• http://restlet.com/blog/2015/12/15/understanding-and-using-cors/
• http://restlet.com/blog/2016/09/27/how-to-fix-cors-problems/
• https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials

Hope it helps you, Thierry

Answer 4

This issue has been noted by the angular2 team.

You can find some other workarounds (one especially written as an @Injectable) following the issue link.

Answer 5

If anyone is using plain JS, based on cexbrayat's answer:

app.Service = ng.core
    .Class({
        constructor: [ng.http.Http, function(Http) {
            this.http = Http;
            var _build = this.http._backend._browserXHR.build;
            this.http._backend._browserXHR.build = function() {
                var _xhr = _build();
                _xhr.withCredentials = true;
                return _xhr;
            };
        }],