LoginSignup
2
1

More than 1 year has passed since last update.

背景

こんな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がリクエストパラメータリクエストボディどちらを引数に取っているか
確認して実装すること。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1