如何将JSON数据从JavaScript前端发布到FastAPI后端？

Question

我正在尝试将一个名为“ethAddress”的值从客户端的输入表单传递给FastAPI，以便我可以在函数中使用它来生成matplotlib图表。

我使用fetch在Charts中发布输入的文本。tsx文件：

   fetch("http://localhost:8000/ethAddress", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(ethAddress),
    }).then(fetchEthAddresses);

然后我有了我的api。py文件设置如下：

#imports
app = FastAPI()

@app.get("/ethAddress")
async def get_images(background_tasks: BackgroundTasks, ethAddress: str):
    
    image = EthBalanceTracker.get_transactions(ethAddress)
    img_buf = image
    background_tasks.add_task(img_buf.close)
    headers = {'Content-Disposition': 'inline; filename="out.png"'}
    return Response(img_buf.getvalue(), headers=headers, media_type='image/png')


@app.post("/ethAddress")
async def add_ethAddress(ethAddress: str):
    return ethAddress

据我所知，我使用< code > fetch < code > POST 请求将请求体中的“ethAddress”从客户端传递到后端，在后端，我可以访问使用FastAPI中的< code>@app.post发布的值。然后，我将该值作为字符串返回。然后，我在< code>GET路径中使用它来生成图表。

我得到这个错误：

INFO:     127.0.0.1:59821 - "POST /ethAddress HTTP/1.1" 422 Unprocessable Entity
INFO:     127.0.0.1:59821 - "GET /ethAddress HTTP/1.1" 422 Unprocessable Entity

我还尝试将客户端上的获取方法切换为 GET 而不是 POST。但得到以下错误：

TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body.

Answer 1

您在终端节点中定义 ethAddress 的方式应作为查询参数;因此，422 无法处理的实体错误。根据文档：

当您声明不属于路径参数的其他函数参数时，它们会自动解释为“查询”参数。

对于要解释为JSON的参数，您需要：

创建Pydant模型：

from pydantic import BaseModel

class Item(BaseModel):
    eth_addr: str

@app.post('/ethAddress')
def add_eth_addr(item: Item):
    return item

FastAPI将期望这样的机构：

{
    "eth_addr": "some addr"
}

使用提取 API：

//...
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({"eth_addr": "some addr"}),
//...

或者，使用< code>Body类型:

from fastapi import Body

@app.post('/ethAddress')
def add_eth_addr(eth_addr: str = Body()):
    return {'eth_addr': eth_addr}

FastAPI将期望这样的机构：

"some addr"

使用提取 API：

//...
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify("some addr"),
//...

由于您有一个单独的body参数，您可能希望使用特殊的< code>Body参数< code>embed:

from fastapi import Body

@app.post('/ethAddress')
def add_eth_addr(eth_addr: str = Body(embed=True)):
    return {'eth_addr': eth_addr}

FastAPI将期望这样的机构：

{
    "eth_addr": "some addr"
}

使用提取 API：

//...
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({"eth_addr": "some addr"}),
//...

相关答案，包括有关如何发布JSON数据的JavaScript示例，可以在此处、此处以及此处和此处找到。