Error 422: Unprocessable entity when I send form data from JS script

[kareemamrr]

Backend

from fastapi import FastAPI, File, Form, UploadFile, Request
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

origins = ["http://127.0.0.1:5500"]
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)


@app.post("/test")
def test(username: str = Form(...)):
    print(f"########### Received {username} #############")

Frontend

async function sendData() {
    formData = new FormData();
    formData.append('username', 'Kareem');
    const response = await fetch('http://127.0.0.1:8000/test', {
        method: 'POST',
        data: formData
    })
    console.log(response)

Response

Response {
body: (...)
bodyUsed: false
headers: Headers {}
ok: false
redirected: false
status: 422
statusText: "Unprocessable Entity"
type: "cors"
url: "http://127.0.0.1:8000/test"
__proto__: Response }

Description

• The /test endpoint is simply supposed to recieve a form containing only username and print it out.
• When I test the API using swagger docs it works fine as expected, but when I try to send form data from an external script it throws me this error and that response object above.

Environment

• OS: Linux
• FastAPI version: 0.61.1
• Python version: 3.8.2

[ycd]

Try sending a request with a header.

const response = await fetch('http://127.0.0.1:8000/test', {
        method: 'POST',
        data: formData,
        headers: {'content-type': 'multipart/form-data'}
    })

[kareemamrr]

@ycd the error is now 400 Bad request

[Mause]

What is the error in the response?

[kareemamrr]

@Mause

Response {
body: (...)
bodyUsed: false
headers: Headers {}
ok: false
redirected: false
status: 400
statusText: "Bad Request"
type: "cors"
url: "http://127.0.0.1:8000/test"
__proto__: Response }

[Mause]

Click on the three little dots next to body?

[kareemamrr]

@Mause

Response {
body: ReadableStream
    locked: false
    __proto__: ReadableStream
bodyUsed: false
headers: Headers {}
ok: false
redirected: false
status: 400
statusText: "Bad Request"
type: "cors"
url: "http://127.0.0.1:8000/test"
__proto__: Response }

[Mause]

Try looking at the response in the network tab instead? That will probably be easier

[kareemamrr]

@Mause detail: "There was an error parsing the body"

[Mause]

Is there an error in server logs?

[ycd]

Try sending a request with a header.

const response = await fetch('http://127.0.0.1:8000/test', {
        method: 'POST',
        data: formData,
        headers: {'content-type': 'multipart/form-data'}
    })

What about application/x-www-form-urlencoded?

[kareemamrr]

@Mause Just INFO: 127.0.0.1:56596 - "POST /test HTTP/1.1" 400 Bad Request

[kareemamrr]

Try sending a request with a header.

const response = await fetch('http://127.0.0.1:8000/test', {
        method: 'POST',
        data: formData,
        headers: {'content-type': 'multipart/form-data'}
    })

What about application/x-www-form-urlencoded?

@ycd back to 422 (Unprocessable Entity)

[Kludex]

Usually 400 with multipart/form-data are due to the lack of python-multipart. Just to be sure, do you have it installed? 🥺

[kareemamrr]

@Kludex Yeah I do