【cakephp4】vue.js,axiosの非同期通信でMissing CSRF token bodyのエラーが出てしまうときの対応（備忘録）

Missing CSRF token body　

POSTする際にCSRFトークンが設定されていないためエラーが出てしまうみたいです。
（cakephp4は最初からroutes.phpにcsrfの設定がさているみたいです。）

routes.php

//最初から記述されている下記の4行がcsrfの設定
$builder->registerMiddleware('csrf', new CsrfProtectionMiddleware([
    'httpOnly' => true,
]));
$builder->applyMiddleware('csrf');

対応にあたって

上記のソースコードをコメントアウトすればcsrfの付けなくてもPOST出来る様になります。
（色々調べたらCSRFの無効化について部分的に使用する方法などあるみたいです）

サンプルソースコード

view.php

<div id="push_botton">
    <button v-on:click="push" >ボタン</button>
</div>

main.js

var push_botton = new Vue({
    el: '#push_botton',
    methods: {
        push: function () {
            //csrfの設定(下記の一文を追記すればエラーは解消される)
            axios.defaults.headers.common['X-CSRF-Token'] = '<?= $this->request->getAttribute('csrfToken') ?>'
            axios.post('<?= $this->Url->build(['controller' => 'Favorites', 'action' => 'fav']) ?>',{
                    users_id: '1',
                    flag: '1'
            });
        }
    }
})