How to call POST API using body prams in angular [ raise 422 error (Unprocessable Entity)]

I'm struggling to use Post API using FastAPI , Angular while using HttpClient.post Function

the issue with receiving the prams in the backend FastAPI no seeing the prams and raise 422 (Unprocessable Entity)

• Mybackend API CODE (FastAPI-Python):

from typing import Optional
from pydantic import BaseModel
class UsersLoginRequest(BaseModel):
username: str
password: str


@users_router.post("/login")
def login(body: UsersLoginRequest):
pass

• Start backend:

Uvicorn running on http: //127.0.0.1:3101 (Press CTRL+C to quit)
Started reloader process [36366] using WatchFiles
Started server process 363701
Waiting for application startup.
Application startup complete

• Call API using Postman cURL example:

curl --location --request POST 'http://127.0.0.1:3101/users/login' \
--header 'Content-Type: application/json' \
--header 'Accept: application/json' \
--data-raw '{
"username": "admin",
"password": "admin"
}'



# See trafic ...

127.0.0.1:54336 - "POST /users/login HTTP/1.1" 200 OK


try same API using angular frontend by calling this.http.post :


import { HttpClient ,HttpHeaders, HttpParams} from '@angular/common/http';

constructor( private http:HttpClient )

signIn(): void
{
const headers = new HttpHeaders();
headers.append('Content-Type', 'application/json');

let params = new HttpParams()
.append('username', "admin")
.append('password', "admin")

debugger
this.http.post('http://127.0.0.1:3101/users/login',params ,{ headers: headers }
).subscribe({
error: (respose:any) => {
debugger
}, // errorHandler
next: (respose:any) => {
debugger
}, // nextHandler
})

}



backend trafic :

INFO: 127.0.0.1:62969 - "POST /users/login HTTP/1.1" 422 Unprocessable Entity


try to change parameter place


import { HttpClient ,HttpHeaders, HttpParams} from '@angular/common/http';

constructor(
private http:HttpClient
)

signIn(): void
{

const headers = new HttpHeaders();
headers.append('Content-Type', 'application/json');


let params = new HttpParams()
.append('username', "admin")
.append('password', "admin")

debugger
this.http.post('http://127.0.0.1:3101/users/login',null ,{ headers: headers, params: params }
).subscribe({
error: (respose:any) => {
debugger
}, // errorHandler
next: (respose:any) => {
debugger
}, // nextHandler
})

}



backend trafic :

INFO: 127.0.0.1:62969 - "POST /users/login HTTP/1.1" 422 Unprocessable Entity


**I DON'T KNOW WHAT I MISSING !!!!**

I'm trying to receive body prams in python - FastAPI

for the record ::

I did try this slotion it didnt work

Error in Angular with HTTPparams 422 (Unprocessable Entity) and FastAPI

you can see the example above ...

Continue reading...