Search code examples
angularangular2-http

Angular 2 does not send CORS HTTP AJAX request

Angular 2.0.0-rc6

I am trying to access CouchDB server via CORS AJAX call as below.

let headers = new Headers();
headers.append('Authorization', 'Basic YWRtaW46TjI4Q29uMy4xYjItNDE=');
let options = new RequestOptions({ headers : headers, withCredentials: true });

this.http.get(this.couchDbUrl, options)
.map(this.extractData)
.catch(this.handleError);
console.log(this.couchDbUrl);

There is no OPTIONS nor GET request emitted from web browser. The catch & map callback are not fired. Also there is no error at all!

enter image description here

If I replace the code with jQuery, it works quite well.

jQuery.ajax({
  method  : 'GET',
  url : this.couchDbUrl,
  cache : false,
  crossDomain : true,
  xhrFields: {
    withCredentials: true
  },
  headers : { 'Authorization' : 'Basic YWRtaW46TjI4Q29uMy4xYjItNDE=' }
});

enter image description here

I don't want to involves jQuery, what's the problem with Angular 2 HTTP client?

Solution

  • You will need to subscribe.

    this.http.get(this.couchDbUrl, options)
.map(this.extractData)
.subscribe( data => ...) // Subscribe
.catch(this.handleError);

    More Info: https://angular.io/docs/ts/latest/guide/server-communication.html