POSTリクエストのパラメータの話

背景

こんなAPIのControllerがあった。
(Java/Spring Boot)

@PostMapping("/hoge")
public ResponseEntity<Resource> postHoge(@RequestParam("fuga") String fuga) {
  // ~~~
}

それに対してフロントエンドからaxiosを使ってこんなリクエストをした。

const requestHoge = async (fuga: string): Promise<void> => {
    await axios.post('/hoge', { fuga: fuga })
}

すると、400 Bad Requestが返ってきた。

原因

APIはパラメータをリクエストパラメータ（フォームデータ）で待っていたのに対し、
フロントエンドはリクエストボディで送ってしまっていた。

対処

axiosのPOSTリクエストでフォームデータを送るには、
一旦FormDataインスタンスにappendして、
それをaxios.postの第二引数に含めてあげる必要がある。

const requestHoge = async (fuga: string): Promise<void> => {
    const formData = new FormData()
    formData.append('fuga', fuga)
    await axios.post('/hoge', formData)
}

結論

APIがリクエストパラメータかリクエストボディどちらを引数に取っているか
確認して実装すること。