vueコンポーネントからのaxios.postでThe POST method is not supported

Question

Laravelとvue.jsを勉強中です。
LaravelをAPIとして、フロント側をVue.js（SPA）で構築しています。

アカウントの削除機能でコンポーネントからaxios.postをしているのですが、

The POST method is not supported for this route. Supported methods: GET, HEAD.",…

というエラーが出てしまいます。
routeもpostにしているのですが、原因が分からず困っています。

アドバイスをいただけますと幸いです。

このようなアカウントの一覧ページにて、削除ボタンをクリックしたら削除するような処理を書いています。

■vueコンポーネント AccountList.vue

<template>
    <div>
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">アカウント一覧</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href=/admin/>Home</a></li>
                            <li class="breadcrumb-item active">Account</li>
                        </ol>
                    </div>
                </div>
                <div class="mt-4 mb-2 col-md-2">
                    <router-link v-bind:to="{name: 'account.create'}">
                        <button type="button" class="btn btn-block btn-info">新規作成</button>
                    </router-link>
                </div>
            </div>
        </div>
        <section class="content">
            <div class="container-fluid">
                <div class="card">
                    <div class="table-responsive mb-4 p-4">
                        {{ test }}
                        <table class="table table-hover text-sm" id="tbl_product">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>メールアドレス</th>
                                    <th>名前</th>
                                    <th>登録日</th>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(account, index) in accounts"  :key="index">
                                    <td>{{ account.id }}</td>
                                    <td>{{ account.email }}</td>
                                    <td>{{ account.name }}</td>
                                    <td>{{ account.created_at }}</td>
                                    <td>
                                        <router-link v-bind:to="{name: 'account.edit', params: {account_id: account.id}}">
                                            <button type="button" class="btn btn-pill btn-block btn-warning">編集</button>
                                        </router-link>
                                    </td>
                                    <td><button type="button" class="btn btn-pill btn-block btn-dark" @click="accountDelete(account.id)">削除</button></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>
<script>
    
    export default {
        props: {
            csrf: {
                type: String,
            },
            test: {
                type: String,
            },
        },
        data() {
            return {
                accounts: [],
            }
        },
        mounted() {
            axios.get('/api/accounts')
                .then((response) => {
                    this.accounts = response.data;
                });
        },
        computed: {
            
        },
        methods: {
            accountDelete: function(id) {
                var warning = window.confirm("削除してよろしいですか？");
                if(warning) {
                    let params = new FormData();
                    params.append('account_id', id);
                    let url = 'api/accounts/destroy';
                    
                    axios.post(url, params, {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencode',
                            'X-CSRF-TOKEN': this.csrf,
                        },
                    })
                    .then(response => {
                        alert("更新しました");
                        //location.href= '/admin/account';
                    });
                }
            },
        },
    }
</script>

■ルート api.php

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\AccountController;

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

Route::get('/accounts', [AccountController::class, 'index']);
Route::post('/accounts', [AccountController::class, 'store']);
Route::get('/accounts/{id}', [AccountController::class, 'show']);
Route::post('/accounts/{id}', [AccountController::class, 'update']);
Route::post('/accounts/destroy', [AccountController::class, 'destroy']);

■コントローラー　AccountController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Admin;
use Illuminate\Support\Facades\Hash;

class AccountController extends Controller
{
       
    public function destroy(Request $request) {
        $account_id = $request->account_id;
        dd($account_id);
    }
}

※パラメーターをddして確認しています。

Answer 1

こちらと同じ問題でした。
https://teratail.com/questions/349974

routeがupdateに通っていました。