Getting 422 Unprocessable Entity when making frontend POST requests to an endpoint that returns an EventSourceResponse but not in Swagger Docs

[eRuaro]

First Check

• I added a very descriptive title here.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the FastAPI documentation, with the integrated search.
• I already searched in Google "How to X in FastAPI" and didn't find any information.
• I already read and followed all the tutorial in the docs and didn't find an answer.
• I already checked if it is not related to FastAPI but to Pydantic.
• I already checked if it is not related to FastAPI but to Swagger UI.
• I already checked if it is not related to FastAPI but to ReDoc.

Commit to Help

• I commit to help with one of those options 👆

Example Code

from sse_starlette.sse import EventSourceResponse

class DemoDocument(BaseModel):
    query: str 
    history: list

@router.post("/document/qa/demo/stream-post", tags=["document-sse"])
async def qa_demo_stream_post(document: DemoDocument):
    try:
        generator = send_message(document.query, document.history)

        return EventSourceResponse(generator)
    except Exception as e:
        return HTTPException(status_code=404, detail="There was an error in streaming your response.")

Description

I'm getting a msg | "Input should be a valid dictionary or object to extract fields from" error on the frontend side even though I've confirmed that I'm passing in query and history in the request payload:
{"query":"random query","history":[]}

I'm also getting this error on the frontend: Error: Expected content-type to be text/event-stream, Actual: application/json

I'm only getting these on the POST request but when I use a GET request, it works fine, however, this means I can't add in a body which is what I'm looking to do with @microsoft/fetch-event-source in the frontend:

// this works fine
const makeStreamingRequestFetchEventSource = async () => {
		try {
			await fetchEventSource("http://localhost:8080/document/qa/demo/stream", {
				method: "GET",
				onmessage(ev) {
					console.log(ev);
				},
				onclose() {
					console.log("closed");
				},
				onerror(err) {
					console.error(err);
				}
			});
		} catch (err) {
			console.error(err);
		}
	};

	const makeStreamingPostRequestFetchEventSource = async () => {
		try {
			await fetchEventSource("http://localhost:8080/document/qa/demo/stream-post", {
				method: "POST",
                                // tried adding this below to circumvent the  `Error: Expected content-type to be text/event-stream, Actual: 
                                // application/json` error to no avail
				headers: {
					"Accept": "application/json",
				},
				body: JSON.stringify({
					query: "What is diffused mode of thinking",
					history: []
				}),
				onmessage(ev) {
					console.log(ev)
				},
				onclose() {
					console.log("closed");
				},
				onerror(err) {
					console.error(err);
				}
			});
		} catch (err) {
			console.error(err);
		}
	};

I'd like to add that everything works fine in the POST endpoint when making it through the swagger /docs

Operating System

Linux

Operating System Details

No response

FastAPI Version

0.103.0

Pydantic Version

2.3.0

Python Version

Python 3.9.17

Additional Context

No response

[spacecaps-cao]

same here 🙋

[eRuaro]

Hey @spacecaps-cao ! I decided to use a GET request to circumvent this error and pass in an ID field in the URL that corresponds to the "body" of the request which I'm getting from the database.

Essentially, the frontend makes a POST request to the DB on the "body" data and then calls the GET request in the server and passes in the ID field in the URL. The backend server will then retrieve the data details from the database.

[spacecaps-cao]

hi @eRuaro ! I believe I have resolved this error in my case.
It appears that the request header did not specify a content type, causing FastAPI to be unable to read it. I simply added "Content-Type": "application/json" to my request, and it now functions properly.

[PREPONDERANCE]

I think 422 denotes an error related to data format. The problem really falls into how you pass the document parameter into the path.

In FastAPI, when you're about to pass a parameter as a body, you should write something similar to this:

from typing import Annotated
from pydantic import BaseModel
from fastapi import Body

class DemoDocument(BaseModel):
    query: str 
    history: list

@router.post("/path/to/your/endpoint", tags=["some tag"])
async def example(document: Annotated[Document, Body]):
    pass

or simply this:

from typing import Annotated
from pydantic import BaseModel
from fastapi import Body

@router.post("/path/to/your/endpoint", tags=["some tag"])
async def example(document: Document = Body()):
    pass

And one more thing, it's recommended to include a db connection into path operation by way of Depends, as in the following code.

from typing import Annotated
from sqlalchemy.orm import Session
from fastapi import Depends

@router.get("/path/to/your/endpoint")
def example(db: Annotated[Session, Depends(get_db)]):
    pass


def get_db():
    db = db_session()
    try:
        yield db
    finally:
        db.close()