Angular http post request fails, but axios one works

Question

I'm doing a POST request with Angular 9 HttpClient but it fails with 'Provisional headers are shown'

My code is like:

const header = {
  headers: new HttpHeaders({
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'application/x-www-form-urlencoded',
  })
};

const req = new HttpRequest('POST', url, bytes, {
  headers: header.headers,
  reportProgress: true,
});

return this.http.request(req).pipe(
  map((event) => {
    if (multyStepsUpload) {
      return;
    }
    return this.reportUploadEvent(event, file);
  }),
  last()
);

The same call works with AXIOS

return new Observable<any>((obs) => {
   axios.post(
    `${url}`,
      bytes,
    {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
    }
  ).then((res) =>{
    console.log(res) ;
    obs.next(res);
  }).catch((err) => {
    console.log(err) ;
    obs.next(err);
  });

It is definitely some Angular config, I try a bunch but nothing works. Can someone advise about possible issues and how to configure Angular http to act like axios?

I suspect it's a CORS issue. You can't add the Access-Control-Allow-Origin header on the frontend: all CORS issues have to be fixed in the backend. You may have forgotten to add OPTIONS to the allowed request verbs. You need OPTIONS for the browser pre-flight request (which servers and Postman don't do). — Will Alexander, Oct 15 '21 at 08:36
Did you tried filtering the event? Try adding if(event.type == HttpEventType.Response){ return this.reportUploadEvent(event, file); }. — Bozhinovski, Oct 15 '21 at 08:36
Does this answer your question: ["CAUTION: provisional headers are shown" in Chrome debugger](https://stackoverflow.com/questions/21177387/caution-provisional-headers-are-shown-in-chrome-debugger) — jabaa, Oct 15 '21 at 08:54
`new HttpRequest` ? `this.http.request(req)`? I've never seen this in Angular. The [documentation](https://angular.io/guide/http) doesn't seem to ever mention this kind of syntax. What about `this.http.post(url, options)` ? — Jeremy Thille, Oct 15 '21 at 08:56
@WillAlexander I use to have this header Access-Control-Allow-Origin but it aint helps. Also try with withCredentials: true, but again. Axios just work by default. — Kaloyan Stamatov, Oct 15 '21 at 09:10

score 1 · Answer 1 · answered Oct 15 '21 at 13:13

Since a lot of headaches, I figure it out. The issue was related with CORS, it was failing, because Angular HTTP has sent OPTIONS to the server. I just make a request without any headers and without reportProgress: true,

just like that

const req = new HttpRequest(method, url, bytes);

return this.http.request(req).pipe(
  map((event) => {
    if (multyStepsUpload) {
      return;
    }
    return this.reportUploadEvent(event, file);
  }),
  last()
);

And start working

Angular http post request fails, but axios one works

1 Answers1