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?
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