(簡易メモ) JavaScript+FastAPI で FormData 送信時にハマったこと

3303 ワード
FastAPI メモ FormData JavaScript JavaScript テキストリンク

例えば、FastAPI に、

# import 等は省略
@app.post("/post")
def route_post(key1: str = Form(...), key2: str = Form(...)):
  print(key1)
  print(key2)
  return

といったルートがあり、そこに JavaScript で以下のようにフォームデータを送信するとき、

var form = new FormData();
form.append("key1", "any_value1");
form.append("key2", "any_value2");

var xhr = new XMLHttpRequest();
xhr.open("POST", "/post");
//xhr.setRequestHeader("Content-Type", "multipart/form-data");
xhr.send(form);

といった感じに書くと思います。(簡単のため、ここではappendを使う方法で。)

ここで、setRequestHeaderを入れてしまうと、400エラーが返されてしまいます。

INFO:     127.0.0.1:46198 - "POST /post HTTP/1.1" 400 Bad Request

自力でリクエストヘッダを設定せず、自動にさせると正常に動きます。

[2022/3/23 追記]
編集リクエスト頂き、ありがとうございました。
「メモ　タグを追加してみました by @Tetsu_Oikawa」