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 angu

Answer 1

getHeaders(): RequestOptions {
    let optionsArgs: RequestOptionsArgs = { withCredentials: true }
    let options = new RequestOptions(optionsArgs)
    return options;
  }

getAPIData(apiName): Observable<any> {`enter code here`
    console.log(Constants.API_URL + apiName);
    let headers = this.getHeaders();
    return this.http
      .get(Constants.API_URL + apiName, headers)
      .map((res: Response) => res.json())
  }

Enabled cors in the webapi

Same code works fine in the chrome(normal),Internet explorer

But it is asking windows login prompt in the incognito chrome,firefox,edge. Share the suggestions how to fix the issue

Answer 2

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 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': 'harikrishna@gmail.com',
    '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

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 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;
            };
        }],

Answer 6

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

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