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

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 ...

CodePudding user response：

Try to send the object instead of http params. For example:

    this.http.post('http://127.0.0.1:3101/users/login',{user: "foo", password: "bar"},{ headers: headers })

It could be you are sending an http form?