Error: 422 (Unprocessable Entity). Angular4

Question

I am trying to post data from Angular4 on localhost:4200 to an API on localhost:8000. I works fine with Postman, but not with Angular. Then I get:

Failed to load resource: the server responded with a status of 422 (Unprocessable Entity)

This is the service that posts to 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());
    }
}

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)
      );
    }

I don't. I define the object http. It's the angular-way of doing it. — Skvupp, Sep 20 '17 at 07:59
Yes, it was a server-problem using the Lumen framework. The Angular code was correct. — Skvupp, Oct 29 '17 at 09:44
https://stackoverflow.com/questions/39807666/different-ports-for-frontend-and-backend-how-to-make-a-request — Sara Vaseei, Nov 15 '17 at 10:42

score 2 · Answer 1 · answered Apr 19 '20 at 10:38

I am also getting same issue while using the 'angular-in-memory-web-api'. The problem was while creating the InMemoryDbService i have not added the primary key like id. after added the id in createDb instance it's working fine for me.



import { Injectable } from '@angular/core';
import { InMemoryDbService } from 'angular-in-memory-web-api';

@Injectable({
  providedIn: 'root'
})
export class DataService implements InMemoryDbService {

  constructor() { }
  createDb() {

    let users = [
      {**id: 1**, username: "Sandy", firstname: "Sandesh", lastname: "K", password: 
        "XXXX", description: "Hi, Going to save data", gender: "Male" }
    ];
    return { users };

  }
}

score 1 · Answer 2 · answered Mar 31 '18 at 15:40

The 422 (Unprocessable Entity) status code means the server understands the content type of the request entity (hence a 415(Unsupported Media Type) status code is inappropriate), and the syntax of the request entity is correct (thus a 400 (Bad Request) status code is inappropriate) but was unable to process the contained instructions.

For example, this error condition may occur if an XML request body contains well-formed (i.e., syntactically correct), but semantically erroneous, XML instructions.

score 0 · Answer 3 · answered Jul 28 '22 at 13:52

Take a look into you backend, in delete fuction, it's common happens when you call DELETE method and try to processos some data from body, but DELETE don't have a body, take a look if u don't have in your delete something like:

err := c.BodyParser(&user)

here BodyParser is the problem, u can't do it cuz you dont have a body

Error: 422 (Unprocessable Entity). Angular4

3 Answers3