CODEWITHSUNDEEP
ajaxhttpangularxmlhttprequestangular2-http
BlackHoleGalaxy
BlackHoleGalaxy

Reputation: 9662

Angular2 post request despite a XMLHttRequest error

I send a request to a remote API. It takes a little time for API to proceed on its side.

After this little waiting time, i can see in network tab a HTTP 200. In the response, I got the proper intended information. Everything on the API side works fine.

BIT on the console, I can see I encountered a XMLHttpRequest Error.

Why, especially if I have a XMLHttpRequest Error, the POST is completed with 200? Shouldn't it be "blocked" by Angular2?

The unintended result is: my file is correctly uploaded and handled by the API, but in Angular2, it triggers the ERROR part of my call.

If I use https://resttesttest.com/ for example, it seems to encounter the same error but it doesn't finalize the POST:

Oh no! Javascript returned an HTTP 0 error. One common reason this might happen is that you requested a cross-domain resource from a server that did not include the appropriate CORS headers in the response.

Angular 2 Code for this call 

this.http
    .post(this.documentUploadAPIUrl, formData, options)
    .subscribe(
      res => {
        this.responseData = res.json();
        console.log(this.responseData);
        console.log('Uploaded a blob or file!');
      },
      error => {
        console.log('Upload failed! Error:', error);
      }
    );

Console

Upvotes: 0

Views: 596

Answers (1)

Vikash Dahiya
Vikash Dahiya

Reputation: 5801

try to set withCredential attribute of xmlHttpRequest to true, this will send credentials managed by the browser, in angular 2 you can do like this

    import { RequestOptions } from '@angular/http';


    this.http
      .post(this.documentUploadAPIUrl, formData, this.post_options)
      .subscribe(
        res => {
         this.responseData = res.json();
         console.log(this.responseData);
         console.log('Uploaded a blob or file!');
        },
        error => {
         console.log('Upload failed! Error:', error);
        }
       );



post_options() {
   return new RequestOptions({ method: 'post', withCredentials : true  });
}

Upvotes: 2

Related Questions