如何使用 Angular 中的 body pram 调用 POST API [引发 422 错误（不可处理的实体）]

Question

我正在努力使用 FastAPI 、 Angular 来使用 Post API 使用 HttpClient.post 函数时

在后端FastAPI中接收婴儿车的问题看不到婴儿车 并提出 422（无法处理的实体）

• Mybackend API 代码（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

• 启动后端：

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

• 使用Postman cURL调用API示例：

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

通过调用 this.http.post 使用 Angular 前端尝试相同的 API：

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

后端流量：

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

尝试更改参数位置

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

后端流量：

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

**我不知道我错过了什么！！！！**

我正在尝试用 python - FastAPI 接收婴儿车

记录在案::

我确实尝试了这个插槽，但没有成功

Angular 中的 HTTPparams 422（不可处理实体）和 FastAPI 出现错误

你可以看上面的例子...

Answer 1

尝试发送对象而不是 http 参数。例如：

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

您可能正在发送 http 表单？

Answer 2

正如 Cristian Dominguez 在回复中所述，问题出在 Typescript 代码中的

params

中。以下代码应该可以正常工作：

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

constructor( private http: HttpClient )

  signIn(): void
  { 
    const headers = new HttpHeaders();
    //specifying 'Content-Type' is probably not necessary, definitely do not append if value is 'multipart/form-data' 
    headers.append('Content-Type', 'application/json'); 

    let params = {} //not httpHeaders, just dictionary
    params['username'] = "admin";
    params['password'] = "admin";
    
    //use the same name as the argument in FastAPI def login() has - in this case 'body'
    const body: string = JSON.stringify(params);


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

旁注：如果您将文件上传到接受

UploadFile

或

File()

类型参数的 FastAPI 端点，则使用带有

form-data

正文的 HTML POST 请求。在这种情况下，请勿将

Content-Type

设置为值

'multipart/form-data'

，因为 API 会返回错误 422。

Content-Type

是由 Angular 自动创建的，它还包含正确的

boundary

部分。请参阅无法在前端使用 JavaScript Fetch API 将文件上传到 FastAPI 后端 一般情况下，不要手动设置

'multipart/form-data'

。