Angular/FastAPI 422 Unprocessable Entity error

I am having issues and receiving 422 Unprocessable Entity response errors from my FastAPI server. I understand the request it is recieving does not match the pydantic model it is expecting, but I don't know why.

Here is my request model:

@authenticate.post("/token", response_model=Token)
async def login_for_access_token(
form_data: OAuth2PasswordRequestForm = Depends()):
print(form_data)
user = authenticate_user(
form_data.username,
form_data.password
)
print(f'User @ 104 = {user}')
if not user:
raise HTTPException(
status_code=status.HTTP_401_UNAUTHORIZED,
detail="Incorrect username or password",
headers={"WWW-Authenticate": "Bearer"},
)
access_token_expires = timedelta(minutes=login_utility.get_expiration_time())
access_token = create_access_token(
data={"sub": user['username']}, expires_delta=access_token_expires
)
return {"access_token": access_token, "token_type": "bearer"}


I am sending the request from an Angular app using:

My payload:

{"username": blah, "password"assword}


postTypeRequest(url: string, payload: any) {
console.log(payload)
console.log(this.REST_API_SERVER+url)
return this.httpClient.post(
this.REST_API_SERVER+url, payload).pipe(map(res => {
return res;
}));
}


I am not having any issues sending the request via Postman. I am a greenhorn using JavaScript/Angular and I am unsure of what I am doing wrong.

Continue reading...