[JS]axios.deleteにて「405 Method Not Allowed」というエラーが表示される

Question

聞きたいこと

Laravel, Vue, axiosを使用してWebアプリを作成しているのですが、掲題のエラーが表示されてしまいます。

• エラーメッセージ

VM129109:1 DELETE http://localhost/api/hub/session?sessionName=aiueo 405 (Method Not Allowed)

• api.php

Route::delete('/hub/session/{sessionName}', 'Hub\SessionsController@destroy');

• web.php

Route::get('/{any}', function () {
    return view('app');
})->where('any', '.*');

• コントローラー

?php

namespace App\Http\Controllers\Hub;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

class SessionsController extends Controller
{

    /**
     * @param $sessionName
     * @return string
     *
     */
    public function destroy($sessionName)
    {

        return "DELETE";
    }
}

• JavaScript

<template>
  <b-card :header="caption">
    <b-table
      :hover="hover"
      :striped="striped"
      :bordered="bordered"
      :small="small"
      :fixed="fixed"
      :items="items"
      :fields="fields"
      :current-page="currentPage"
      :per-page="perPage"
      responsive="sm"
    >
      <template
        slot="切断"
        slot-scope="data"
      >
        <button v-on:click="deleteSession('aiueo');">
          {{ data.value }}
        </button>
      </template>
    </b-table>
    <nav>
      <b-pagination
        v-model="currentPage"
        :total-rows="getRowCount(items)"
        :per-page="perPage"
        prev-text="Prev"
        next-text="Next"
        hide-goto-end-buttons
      />
    </nav>
  </b-card>
</template>

<script>
  import axios from 'axios'

  /**
   * Randomize array element order in-place.
   * Using Durstenfeld shuffle algorithm.
   */
  const shuffleArray = (array) => {
    for (let i = array.length - 1; i > 0; i--) {
      const j    = Math.floor(Math.random() * (i + 1))
      const temp = array[i]
      array[i]   = array[j]
      array[j]   = temp
    }
    return array
  }

  export default {
    name : 'CTable',
    props: {
      caption: {
        type   : String,
        default: 'Table',
      },
      hover: {
        type   : Boolean,
        default: false,
      },
      striped: {
        type   : Boolean,
        default: false,
      },
      bordered: {
        type   : Boolean,
        default: false,
      },
      small: {
        type   : Boolean,
        default: false,
      },
      fixed: {
        type   : Boolean,
        default: false,
      },
      fields: {
        type   : Array,
        default: false
      },
      sessions: {
        type   : Array,
        default: false
      }
    },
    data: () => {
      return {
        currentPage: 1,
        perPage    : 20,
        totalRows  : 0,
      }
    },
    computed: {
      items() {
        return shuffleArray(
          this.sessions
        )
      }
    },
    methods: {
      getRowCount (items) {
        return items.length
      },
      deleteSession ($sessionName) {
        axios
          .delete('http://localhost/api/hub/session', {params: {'sessionName': 'aiueo'}})
          .then(response => (console.log(response)))
      }
    },
  }
</script>

追記

• JavaScript

<template>
  <b-card :header="caption">
    <b-table
      :hover="hover"
      :striped="striped"
      :bordered="bordered"
      :small="small"
      :fixed="fixed"
      :items="items"
      :fields="fields"
      :current-page="currentPage"
      :per-page="perPage"
      responsive="sm"
    >
      <template
        slot="切断"
        slot-scope="data"
      >
        <button v-on:click="deleteSession('aiueo');">
          {{ data.value }}
        </button>
        <form method="POST" @submit.prevent="deleteSession('aiueo')">
          <input name="_method" type="hidden" value="DELETE">
          <button type="button" @click="deleteSession">切断する</button>
        </form>
      </template>
    </b-table>
    <nav>
      <b-pagination
        v-model="currentPage"
        :total-rows="getRowCount(items)"
        :per-page="perPage"
        prev-text="Prev"
        next-text="Next"
        hide-goto-end-buttons
      />
    </nav>
  </b-card>
</template>

<script>
  import axios from 'axios'

  /**
   * Randomize array element order in-place.
   * Using Durstenfeld shuffle algorithm.
   */
  const shuffleArray = (array) => {
    for (let i = array.length - 1; i > 0; i--) {
      const j    = Math.floor(Math.random() * (i + 1))
      const temp = array[i]
      array[i]   = array[j]
      array[j]   = temp
    }
    return array
  }

  export default {
    name : 'CTable',
    props: {
      caption: {
        type   : String,
        default: 'Table',
      },
      hover: {
        type   : Boolean,
        default: false,
      },
      striped: {
        type   : Boolean,
        default: false,
      },
      bordered: {
        type   : Boolean,
        default: false,
      },
      small: {
        type   : Boolean,
        default: false,
      },
      fixed: {
        type   : Boolean,
        default: false,
      },
      fields: {
        type   : Array,
        default: false
      },
      sessions: {
        type   : Array,
        default: false
      }
    },
    data: () => {
      return {
        currentPage: 1,
        perPage    : 20,
        totalRows  : 0,
      }
    },
    computed: {
      items() {
        return shuffleArray(
          this.sessions
        )
      }
    },
    methods: {
      getRowCount (items) {
        return items.length
      },
      deleteSession ($sessionName) {
        const params = new URLSearchParams()
        params.append('sessionName', $sessionName)
        axios
          .delete('http://localhost/api/hub/session', { data: params }, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
            },
          })
          .then(response => (console.log(response)))
      }
    },
  }
</script>

Answer 1

クエリパラメーターで引き渡していたsessionNameをエンドポイントにしたらうまくいきました！
回答していただき、ありがとうございました！
(誤) http://localhost/api/hub/session?sessionName=aiueo
(正) http://localhost/api/hub/session/aiueo

Answer 2

axios.delete('http://localhost/api/...',{ data: params, headers: { ... } })

のように第2引数にdataとheadersを記述すればいけた気がします

Answer 3

「もしかしたらこれかなあ」くらいの参考記事提示でしかありませんが、ヒントになればと。

• $axios.$deleteでデータを送る方法

$deleteの際は引数で「data(データ)オブジェクト」を定義する必要があるようです。

もしかしたらそれだけではそもそもDELETEリクエストが送れないかもしれないので、上記だけで解決しなければ_method=DELETEをパラメータに含めてみてください。

• LaravelにフォームからPUT/DELETEリクエストを送る

Comments

[sabx]

ご回答ありがとうございます！
両方とも試してみましたが、解決せず・・・
アドバイスしていただいたとおりに実装した自身も少しないので、質問本文に新しいコードを追記しています・・