Angular 6 HTTP deals with successful Response (Sucess Code: 200) as error response

Question

This same code was working on Angular 2, but on Angular 6 it returns error on http (i.e the http fails to the error handler) but request is success (Code:200 and returning the data as expected)

Update Summary of the issue it was basically cors issue

1- I was using Angular2 HTTP instead HttpClient applied since Angular4

2- Although this was not the main issue I got CORS error shown on chrome (probably after using httpclient)

3- there was no need to add responsType, After solving the cors error on server side it worked.

Old wrong code:

var headers = new Headers();
  headers.append("Accept", 'application/json');
  headers.append('Content-Type', 'application/x-www-form-urlencoded');
  let options = new RequestOptions({ headers: headers });

  let postParams = "grant_type=password&username="+username+"&password="+password;
  this.http.post("api/Token", postParams, options)
      .subscribe(data => {
               console.log(data);
       },  
      error => {
        //can I get the response body here?
        console.log(JSON.stringify(error));

Related issue is found on this link https://github.com/angular/angular/issues/19555 so I tried to add responseType, as follow

Also According to this question , I tried to pass the responseType property, but it is not working either Angular 6: How to set response type as text while making http call

      this.http.post(AppSettings.apiaddress + "Token", postParams, {headers,responseType: ResponseContentType.Text})

If noway to get it working, is there is a way to get the data on the error handler as workaround?

Appreciate your help but If you don't know answer no need to downvote, so others can help, thanks

Also are you using Http or HttpClient from Angular? Those headers don't look good. — Zlatko, Oct 29 '18 at 21:23
@Zlatko the http deals with response as error response so it fails to the error handler, although the response is success, with the expected data returned correctly — Mosta, Oct 29 '18 at 21:44
If you don't know answer no need to downvote, so others can help, thanks — Mosta, Oct 30 '18 at 09:20
Good, nice that guy solved it. A tip for future questions: you've shown the error right away, that might have given someone a clue about this right away. CORS is a frequent issue and easy to spot. — Zlatko, Oct 31 '18 at 05:57
Also, regardless of the issue, I suggest you to switch the http to Http client as soon as you can. For one, the previous is deprecated. For two, the other is giving you things out of the box plus it has interceptors :) — Zlatko, Oct 31 '18 at 05:59
As for the downvote, it wasn't me. I almost never downvote questions, rarely bad answers and then I try to leave a comment on why. — Zlatko, Oct 31 '18 at 06:01

Farhat Zaman · Answer 1 · 2018-10-30T09:52:59.090

Please try this way.

var headers = new Headers();
  headers.append("Accept", 'application/json');
  headers.append('Content-Type', 'application/x-www-form-urlencoded');

  let postParams = "grant_type=password&username="+username+"&password="+password;
  this.http.post("api/Token", postParams, {headers, 'responseType': 'json'})
      .subscribe(data => {
               console.log(data);
       },  
      error => {
        //can I get the response body here?
        console.log(JSON.stringify(error));

and also try to replace with var headers = new Headers(); to var headers = new HttpHeaders();

Angular 6 HTTP deals with successful Response (Sucess Code: 200) as error response

1 Answers1