400 Bad Request when handling FormData from web browser HTTP POST request

[charli3w]

First check

• I added a very descriptive title to this issue.
• I used the GitHub search to find a similar issue 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.
• After submitting this, I commit to one of:
  • Read open issues with questions until I find 2 issues where I can help someone and add a comment to help there.
  • I already hit the "watch" button in this repository to receive notifications and I commit to help at least 2 people that ask questions in the future.
  • Implement a Pull Request for a confirmed bug.

Example

Here's a self-contained, minimal, reproducible, example with my use case:

Backend FastAPI:

from fastapi import FastAPI, Form

app = FastAPI()

@app.post("/form-data")
def form_data(input: str = Form(...)):
    return {"input": input}
    # Returns 404 Bad Request

The above code block is problematic for submitting HTTP POST requests from web browsers (tested on both Chrome and Safari). I am receiving a 400 Bad Request error no matter what I try. Originally I was working with uploading files, but I debugged this further and realized I have this issue with all forms in general.

Here's an example of failing client code (tried with both axios and fetch to no avail):

Client JS:

const data = new FormData();
data.append('input', 'entry');

axios.post("/form-data", data, {
  headers: {
    'Authorization': 'KEY',
  },
});

Going deeper, I actually see this issue in my endpoint logs:

WARNING multipart.multipart multipart.py:1180 | req_id:zMZrM66m Did not find boundary character 123 at index 2

Note that I am able to curl and make requests from the Python requests library just fine. This seems to be an issue specifically with requesting from the browser. Based on the log above I think there might be a problem with multipart validation.

I am able to circumvent this by directly reading the request file, but this means I don't have the built-in validation for the requests:

from fastapi import FastAPI, Request

app = FastAPI()

@app.post("/form-data")
def form_data(request: Request):
    form = await request.form()
    return {"input", form["input"]}
    # Returns 200 OK

I've gone through essentially every doc/post/question re: this issue, and it does not seem to be the other problems, which are:

1. Removing 'Content-Type': 'multipart/form-data' to autogenerate boundary (client request does not contain this)
2. Installing python-multipart which is already installed (the warning is coming from that package)

Description

In short, I am having trouble making POST HTTP requests with multipart form data directly from browsers, but I am not having this issue with curl or Python requests. Based on the symptoms, I think this issue could be due to me making the request incorrectly / FastAPI+multipart not working well with forms together (but the latter is highly unlikely).

In other news, super excited to be joining the FastAPI dev community, getting my feet wet and think the tooling is awesome :)

Does someone here know what's going on / could help me out?

Environment

• OS: [e.g. Linux / Windows / macOS]: macOS
• FastAPI Version [e.g. 0.3.0]: 0.66.0

To know the FastAPI version use:

python -c "import fastapi; print(fastapi.__version__)"

• Python version: 3.8.0

To know the Python version use:

python --version

Additional context

I've sank a number of hours into this already, throwing in the towel and checking here in case I'm missing something obvious.

[Mause]

Have you tried setting the Content-Type header in your request to multipart/form-data?

[charli3w]

Yes I have to no avail. Here are some details of the request diffs:

Python Request:

Header:

{
  "content-length": "194",
  "user-agent": "python-requests/2.25.1",
  "accept-encoding": "gzip, deflate",
  "accept": "*/*",
  "content-type": "multipart/form-data; boundary=7b84dd50dc9f8a8090c5fa55dccb2adc"
}

Body:

--7b84dd50dc9f8a8090c5fa55dccb2adc
Content-Disposition: form-data; name="file"; filename="test1.csv"

one,two,three,four,five
six,seven,eight,nine,ten

--7b84dd50dc9f8a8090c5fa55dccb2adc--

Axios POST:

Header:

{
  "content-length": "230",
  "sec-ch-ua": "\" Not;A Brand\";v=\"99\", \"Google Chrome\";v=\"91\", \"Chromium\";v=\"91\"",
  "accept": "application/json, text/plain, */*",
  "sec-ch-ua-mobile": "?0",
  "user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36",
  "content-type": "multipart/form-data; boundary=----WebKitFormBoundaryR9xFIBH5TBxS6BWR",
  "origin": "http://XXXXXXXXX",
  "sec-fetch-site": "cross-site",
  "sec-fetch-mode": "cors",
  "sec-fetch-dest": "empty",
  "referer": "http://XXXXXXXXX",
  "accept-encoding": "gzip, deflate, br",
  "accept-language": "en-US,en;q=0.9"
}

Body:

------WebKitFormBoundaryR9xFIBH5TBxS6BWR
Content-Disposition: form-data; name="file"; filename="test1.csv"
Content-Type: text/csv

one,two,three,four,five
six,seven,eight,nine,ten

------WebKitFormBoundaryR9xFIBH5TBxS6BWR--

Note that both requests can succeed with a non-FastAPI debug endpoint.

For reference, this is what the debug Starlette Request looks like via body = await request.body(); log(body.decode("utf-8"):

PyRequest:

body: --ec860f4311c60bcd1c0c51b6642b926e
Content-Disposition: form-data; name="file"; filename="test1.csv"

one,two,three,four,five
six,seven,eight,nine,ten

--ec860f4311c60bcd1c0c51b6642b926e--

Axios POST:

body: {}

Sad to only have that in the block. I can only surmise something is wacky about the headers. Is there a way to figure out more debugging info?

One piece of data that might help is this * appears * to only be isolated to multipart/form-data requests. Additionally making it weirder, but why I think the boundary being used might be finicky.

[charli3w]

(Update) We discovered this issue is actually due to a proxy server on our end -- unrelated to FastAPI. From manually calling the backend it was shown that the integration indeed works. Closing this issue, thanks all for the help.