Angular2 Http post 400

Question

I have this service:

@Injectable()
export class HttpserviceService {
  baseUrl: string = "http://localhost:3000/";
  headers = new Headers({
    'accept': 'application/json'
  });

 post(url: string,  data: any): Observable<any> {

    //send post request
    return this.http.post(this.baseUrl+url, JSON.stringify(data))
      .map(this.extractData) //this works
      .catch(this.handleError); //this as well
  }
}

and when I subscribe to that method:

user: User = {
  username: "test",
  password: "12345"
}
authUrl: string = 'user/auth';
return this.http.post(this.authUrl, user)
  .subscribe(data => {
    //console.log(data);
  });

I'm getting an

Status Code:400 Bad Request

What can be wrong?

When I request using postman everything works ok

Well, this could be a CORS issue, show us the stacktrace of the error in your angular app. — dlcardozo
– dlcardozo, Commented Feb 10, 2017 at 14:43
The server should send a proper error message explaining why your data is invalid. If it doesn't, it should at least log it. If it doesn't, you could debug it. My point being: check yur server. Also, you didn't post the complete client code, so we don't know what you're doing with the headers, and specifying the content type and calling JSON.stringify() is useless, since Angular does it for you when sending an object directly. — JB Nizet
– JB Nizet, Commented Feb 10, 2017 at 14:45
Well, for a start, you're sending JSON, but your content type is text/plain. Second you're not showing the content of the response. — JB Nizet
– JB Nizet, Commented Feb 10, 2017 at 14:48

Vova Bilyachat · Accepted Answer · 2017-02-10 14:45:55Z

3

In postman i see that you have 1 header. Which you are not sending in angular

Try following, headers should go as a third parameter

post(url: string,  data: any): Observable<any> {

    //send post request
    return this.http.post(this.baseUrl+url, JSON.stringify(data),  {headers: this.headers})
      .map(this.extractData) //this works
      .catch(this.handleError); //this as well
  }

edited Feb 10, 2017 at 14:45

answered Feb 10, 2017 at 14:41

Vova Bilyachat

19.5k4 gold badges60 silver badges88 bronze badges

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

5 Comments

gsiradze Over a year ago

it's Content-Type application/json and I have that in code

gsiradze Over a year ago

I added that as header but result is same

Vova Bilyachat Over a year ago

@gsiradze you have only initialization of headers, but you are not sending them, see my update

gsiradze Over a year ago

I dont know who downvoted but your edited answer works. thanks a lot it took my 2 hours

Vova Bilyachat Over a year ago

@gsiradze It must work. As i said you were not sending headers :) dont forget to mark as resolved.

Collectives™ on Stack Overflow

Angular2 Http post 400

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related