Angular2 post request despite a XMLHttRequest error

Question

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

You need to setup CORS on the server developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS — J J B
– J J B, Commented Dec 20, 2016 at 20:04
first you should read the link by J J B second what you are using as backend to create the APIs — rashfmnb
– rashfmnb, Commented Dec 20, 2016 at 20:06
It's a JAVA backend i guess. Not my own work. The strange thing is i get an error on console even if the status is finally 200... — BlackHoleGalaxy
– BlackHoleGalaxy, Commented Dec 20, 2016 at 20:13
Can you post the headers of the first 2 requests that are content-type text/html? — J J B
– J J B, Commented Dec 20, 2016 at 20:24
Added on question the content of first request. Second is the same plus Proxy-Authorization: NTLM lRMAAAAD01JQzcxMDVDR0lfUUM. The problem seems really to be the fact a XMLHttpRequest Error is triggered and it pass over the fact the status is 200. — BlackHoleGalaxy
– BlackHoleGalaxy, Commented Dec 20, 2016 at 20:34

Vikash Dahiya · Accepted Answer · 2016-12-22 15:41:42Z

2

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

edited Dec 22, 2016 at 15:41

answered Dec 20, 2016 at 20:29

Vikash Dahiya

5,8113 gold badges20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BlackHoleGalaxy Over a year ago

Tested it doesn't work. I reformated my question to be more precise. Angular2 in fact waits properly for call to be complete. The status is 200 but an error is thrown due to the cross-domain XMLHttpRequest and Angular doesn't in fact see the status 200, it only catch the error. I tried an upload call from localhost using postman, everything works.

BlackHoleGalaxy Over a year ago

Nope, already thought about it and it doesn't change anything.

Collectives™ on Stack Overflow

Angular2 post request despite a XMLHttRequest error

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related