Laravel + Vue.jsでaxiosからのリクエストが失敗した単純なミス

環境

• Laravel：6
• Vue.js：2.6.14
• axios：0.19

事象

Laravel + Vue.jsでaxiosからのputリクエストでデータを更新しようとしたのですが、
以下のようなエラーでうまくいきませんでした。

resources/js/components/ExampleComponent.vue

 const response = await axios.put('books/', {
    data: val,
 }).catch(e => {
    console.log(e);
 });

ChromeのDevToolsより

Request Method: PUT
Status Code: 405 Method Not Allowed

エラー405が返ってきてしまいました。

原因

そもそもLaravelのルーティングのメソッドがpatchだったのに、axiosのエイリアスをputにしていたことが原因でした。

routes/web.php

Route::patch('books/', 'BookController@update');

こちらが修正したコード。

resources/js/components/ExampleComponent.vue

 const response = await axios.patch('books/', {
    data: val,
 }).catch(e => {
    console.log(e);
 });

おまけ

このような単純なミスでしたが、色々調べて脱線していきまして
axios側を以下のようにしても大丈夫でした。

resources/js/components/ExampleComponent.vue

const response = await axios.post('books/', {
    data: val,
    _method: 'patch',
}).catch(e => {
    console.log(e);
});

今回はわざわざpostにして_method: 'patch'を追加する必要はなかったですが、
putリクエストやpatchリクエストが正常に取得できない場合に使うそうです。

参考記事

結論

axiosのエイリアス側とLaravelのルーティングのメソッドを合わせればいいだけでした。
putとpatchが似ている分、混在してしまった単純なミスでした。