Getting a 400 Bad Request error code in Angular 5 POST Call

Question

I have an ionic app through which i'm calling a rest service with a POST method. I am sending a large string of base64 data to the server. Everything works fine if i send the request through Postman. But, when i send it through the App, it gives me a 400 Bad Request error. This is my angular provider code :-

 uploadPic(bugImage : any){
    const headers1 = new HttpHeaders();
    headers1.append('Content-Type', 'application/json');

    return this.http.post(this._global.LocalserviceURL + 'ReportaBug', JSON.stringify(bugImage),{headers : headers1}).map(result => result).catch(this.errorHandler);
  }
  errorHandler(error: HttpErrorResponse) {
    return Observable.throw(error.message || "Sever Error");
  }

and this is how i am using the provider method :-

onBasicUpload(e: any) {
    this.imgpov.uploadPic(this.test).subscribe(res => {
      console.log(res);
    })

I've looked online and it says to send headers too. I guess i'm sending appropriate headers. How do i get this working?

I cross checked the url it is fine. it's the same as that i used in Postman — K. Ajay, Jun 17 '19 at 07:31
You can check the difference between your app request and postman request. So you can find out which value is incorrect. — Emon, Jun 17 '19 at 07:31
There are 9 temporary headers auto generated by Postman. That is the only difference i guess. — K. Ajay, Jun 17 '19 at 07:33
Can you check the response message to make sure if you are missing some value in the header? — Emon, Jun 17 '19 at 07:42
How to check that? i have checked the reponse headers in Postman and it looks fine — K. Ajay, Jun 17 '19 at 07:50
Can you show the headers and data that you sent with Postman? — David, Jun 17 '19 at 08:46
Headers - http://prntscr.com/o2tgfo Data - http://prntscr.com/o2tgn1 — K. Ajay, Jun 17 '19 at 08:53

score 1 · Answer 1 · answered Jun 17 '19 at 09:58

1

I find out the root cause should be the Content-type haven't been updated in your request header.

Try to use const headers1 = new HttpHeaders().set('Content-Type', 'application/json'); like Angular HttpClient doesn't send header

answered Jun 17 '19 at 09:58

Emon

1,401
14
24

I tried it, now the Content-Type has changed to application/json but i'm still getting the same error Screenshot - http://prntscr.com/o2v9nf – K. Ajay Jun 17 '19 at 11:08
can you give me a screenshot about the error response to check if there is any information?. – Emon Jun 18 '19 at 07:14
Or if it's body data issue instead of header issue? Because I saw there was no "data:image/png;base64" before your postman request – Emon Jun 18 '19 at 07:50

score 0 · Answer 2 · answered Jun 17 '19 at 08:42

0

You need to see the 'content-type headers'

headers: new HttpHeaders( {
      **'Content-Type': 'application/json'**,
      'Authorization': 'Basic ' + token
    } )

Or

headers: new Headers({'Content-Type': 'application/x-www-form-urlencoded'

So based on Requested content-type you need to add those headers.

answered Jun 17 '19 at 08:42

RajuPedda

3,141
3
14
27

I have already added 'Content-Type': 'application/json' header into my request. – K. Ajay Jun 17 '19 at 08:59
To make sure on URL, can you please check your query params (type checks )properties with Postman properties? – RajuPedda Jun 17 '19 at 09:11
They are all blank. – K. Ajay Jun 17 '19 at 09:22
If you could share the screenshot of postman request & result and app request & respone, will help us to understand the problem further. – RajuPedda Jun 17 '19 at 09:34
Postman Headers - https://prnt.sc/o2tgfo Postman Body - https://prnt.sc/o2tgn1 App request 1 - https://prnt.sc/o2tzsp App request 2 - https://prnt.sc/o2u06x – K. Ajay Jun 17 '19 at 09:44
In Request headers, it should be 'Content-Type': application/json. – RajuPedda Jun 17 '19 at 10:39

Getting a 400 Bad Request error code in Angular 5 POST Call

2 Answers2