Angular2 post request despite a XMLHttRequest error

603 Views Asked by At

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

1

There are 1 best solutions below

2
On BEST ANSWER

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  });
}