提取Fastapi邮政请求

Question

JavaScript代码：

 const submitHandler = async (e) => {
 
     const user = document.getElementById("email").value;

     await fetch('https://clownfish-app-fqu4k.ondigitalocean.app/meadow', {
         method: "POST",
         headers: "content-type": "application/json",
         body: user,
      })

   }

Python：

from fastapi import FastAPI
from pydantic import BaseModel
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)


class User(BaseModel):
    email: str


@app.post("/meadow")
def password_validation(user: User):
    return {
        "status": "success",
        "data": user
    }

以上在Postman中效果很好，但是在Chrome中给出以下错误：

任何帮助将不胜感激。

我已经更新了代码以包括以下建议。没有快乐。该请求导致422错误 - “无法处理的实体”。我是否应该如答案？ 我还尝试将获取标头设置为“接受”。

更新 请求是导致

{"detail":[{"loc":["body"],"msg":"value is not a valid dict","type":"type_error.dict"}]}

一个

我的 新手错误 - 发送数据之前，我没有将数据串起。请参阅下面的 @Quentin的答案。

Answer 1

用户是用户输入的任何字符串。

  const user = document.getElementById（“ email”）。value;
 

---

然后，您将这些绳子放入体内，完全原始，并声称它是JSON。

 标题：“ content-type”：“ application/json”，
    身体：用户，
 

---

用户似乎不太可能在电子邮件字段中输入J​​SON。

如果您告诉服务器您要发送JSON，则需要实际发送JSON。

虽然我对Fastapi并不熟悉，但看起来像是预期的JSON文本：

{ "email": "some value" }

因此您需要构造：

body: JSON.stringify({ email: user })

Answer 2

在服务器上尝试一下。

您的代码没有启用CORS。如果您使用的是跨域请求，则需要启用它。

from fastapi import FastAPI
from pydantic import BaseModel

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

class User(BaseModel):
    email: str


@app.post("/meadow")
def password_validation(user: User):
    return {
        "status": "success",
        "data": user
    }