如何通过POST请求将数据从客户端传递到Fastapi OAuth2PasswordRequestForm？

chhkpiq4 于 2022-09-21 发布在其他

关注(0)|答案(1)|浏览(234)

我使用nextjs作为我的前端，使用fast api作为我的后端。当我在前端运行此代码时：

async function test() {
    const response = await fetch("http://127.0.0.1:8000/token", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            username: "johndoe",
            password: "secret",
        }),
    }).then((res) => res.json());
    return {
        props: { data: response },
    };
}

useEffect(() => {
    const data = test();
    console.log(data);
}, []);

我得到了一个兑现的承诺，它是一个长度为2的数组，其中每个条目是：

loc: (2) ['body', 'username']
msg: "field required"
type: "value_error.missing"

并在控制台中显示错误消息：“POST http://127.0.0.1:8000/token 422(UnProcedable Entity)”。

我的后台可以在这里找到https://github.com/ColeBlender/oauth2-test。几天来，我一直在试图弄清楚这个问题，但一直没有找到答案，所以我非常感激任何帮助。

oauth-2.0

来源：https://stackoverflow.com/questions/72278620/how-to-pass-data-from-client-to-fastapi-oauth2passwordrequestform-via-a-post-req

1条答案

按热度按时间

ylamdve61#

我们可以通过FETCH使用FormData来发送表单数据。如果我们不传递任何内容类型标头，那么它将使用‘MultiPart/Form-Data’

const loginForm = document.querySelector(".login-form")

loginForm.addEventListener("submit", (e) => {
  e.preventDefault()

  const formData = new FormData(loginForm)

  fetch("http://localhost:8000/auth/token", {
    method: "POST",
    body: formData,
  })
  .then((res) => res.json())
  .then((token) => {
    console.log("Token", token)
    // window.location.href = "/"
  })
  .catch((err) => {
    console.log("Error", err)
  })
})

另一种方法是将URLSearchParams与FormData一起使用，并将Content-Type设置为‘application/x-www-form-urlencode’

const formData = new URLSearchParams(new FormData(loginForm))

fetch("http://localhost:8000/auth/token", {
  method: "POST",
  body: formData,
  headers: {
    "Content-Type": "application/x-www-form-urlencoded"
  }
})

赞(0）回复(0）举报 2022-09-21

我来回答

如何通过POST请求将数据从客户端传递到Fastapi OAuth2PasswordRequestForm？

1条答案

相关问题

热门标签

最新问答