ReactとaxiosでLaravel製のAPIにPUTしたら405エラーが出た

axios便利すぎんか？

ある商品の情報を更新するための関数として,以下のようなものを書いてました.
情報には画像が含まれるのでcontent-typeにmultipart/form-dataを指定.

updateProduct() {
    const params = new FormData();
    params.append('title', this.state.title)
    params.append('image', this.state.image)
    axios
        .put(
            `/api/products/${this.state.id}`,
            params,
            {
            headers: {
                'content-type': 'multipart/form-data',
            }
        })
        .then((res) => {
            this.setState({
                title: '',
                image: '',
            })
        })
        .catch(error => {
            console.log(error)
        })
}

そして意気揚々とPUTしてみると405エラーが帰ってきた.
どうやらPUTは禁止されているメソッド(?)らしい.
というわけで解決します.

解決法

PUTがダメならPOSTしちゃえばいいじゃない！！
ということで以下の記事を参考にさせて頂いて解決しました(ありがとうございます！！).

Axios で multipart/form-data にした PUT リクエストが失敗する際の対策

編集後の関数は以下の通り.
無理やりpostして中身をPUTで書き換えています.

updateProduct() {
    const params = new FormData();
    params.append('title', this.state.title)
    params.append('image', this.state.image)
    axios
        .post(
            `/api/products/${this.state.id}`,
            params,
            {
            headers: {
                'content-type': 'multipart/form-data',
                'X-HTTP-Method-Override': 'PUT',
            }
        })
        .then((res) => {
            this.setState({
                title: '',
                image: '',
            })
        })
        .catch(error => {
            console.log(error)
        })
}

HTTPが現在GETとPOSTにしか対応していないことが原因ですかね.
他のメソッド(DELETEとか)でも応用できそうなので覚えておこうと思います.