Error: 422 (Unprocess entity). Angular4

Question

I am trying to send data from Angular4 to localhost: 4200 to the API on localhost: 8000. I work fine with Postman, but not Angular. Then I get:

Failed to load resource: server responded with status 422 (raw entity)

This is the service that sends the api:

@Injectable()
export class ApiService {
    constructor(private http: Http) { }
    login(username: string, password: string): Observable<Response>{
        const url = 'http://localhost:8000/login';
        const json = JSON.stringify({username: username, password: password});
        const headers: Headers = new Headers();
        headers.append('Content-Type', 'application/json; charset=UTF-8');
        return this.http.post(url, json, headers )
            .map(res => res.json());
    }
}

Run codeHide result

This is the code that runs the method

   logIn(user: string, password: string){
      this.apiService.login(user, password).subscribe(
          data => console.log(data),
          error => console.log(error)
      );
    }

Run codeHide result

Answer 1

Status code 422 (raw entity) means the server understands the content type of the request object (therefore, 415 (Unsupported media type) is not suitable), and the syntax of the request object is correct (thus, 400 (failed request) status code is not suitable), but not was able to process the contained instructions.

, , XML (.. ), XML.