Vue.js(cli)とlaravelにて簡単なtodoアプリを開発中ですが405番のエラーが出てtodoが追加できません。

Question

vue.cliとLaravelで「追加・更新・削除」の機能のついたtodoアプリを開発中なのですが実際に追加ボタンをクリックした際下記のようなエラーが出ます。
chromeの検証ツール内のconsole内をコピーしたものになります。
ローカルサーバーでvueとlaravel同時に立ち上げ検証しております。
お力添え頂けると助かります。

xhr.js?b50d:177 POST http://127.0.0.1:8000/api/todo/[object%20Object] 405 (Method Not Allowed)

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v- on handler (Promise/async): "Error: Request failed with status code 405"
found in
---> <App> at src/App.vue
<Root>

vue.runtime.esm.js?2b0e:1888 Error: Request failed with status code 405
at createError (createError.js?2d83:16)
at settle (settle.js?467f:17)
at XMLHttpRequest.handleLoad (xhr.js?b50d:62)

以下、vue.jsのApp.vue内です

<template>
  <div id="app">
    <div id="bg">
      <div class="todo">
        <p>Todo List</p>
        <div class="flex">
          <input type="text" name="insert" v-model="newTodo">
          <button class="btn insert" @click="insertTodo">追加</button>
        </div>
        <div class="list" v-for="item in todoLists" :key="item.id">
          <div class="flex">
            <input type="text" v-model="item.todo" >
            <div class="container">
              <button class="btn update" @click="updateTodo(item.id, item.todo)">更新</button>
              <button class="btn delete" @click="deleteTodo(item.id)">削除</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      newTodo: "",
      todoLists: [],
    };
  },
  methods: {
    async getTodo() {
      const resData = await axios.get("http://127.0.0.1:8000/api/todo/");
      this.todoLists = resData.data.data;
    },
    async insertTodo() {
      const sendData = {
        todo: this.newTodo,
      };
      await axios.post("http://127.0.0.1:8000/api/todo/" + sendData);
      await this.getTodo();
    },
    async updateTodo(id, todo) {
      const sendData = {
        todo: todo,
      };
      await axios.put("http://127.0.0.1:8000/api/todo/" + id, sendData);
      await this.getTodo();
    },
    async deleteTodo(id) {
      await axios.delete("http://127.0.0.1:8000/api/todo/" + id);
      await this.getTodo();
    },
  },
  created() {
    this.getTodo();
  },
};
</script>

以下、Laravel内の記述です
マイグレーション

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateTodosTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('todos', function (Blueprint $table) {
            $table->id();
            $table->string('todo');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('todos');
    }
}

cors

<?php
return [
    'paths' => ['*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => false,
    'max_age' => false,
    'supports_credentials' => false,
];

コントローラー

<?php

namespace App\Http\Controllers;

use App\Models\Todo;
use Illuminate\Http\Request;

class TodoController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $items = Todo::all();
        return response()->json([
            'message' => 'OK',
            'data' => $items
        ], 200);
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $item = new Todo;
        $item->todo = $request->todo;
        $item->save();
        return response()->json([
            'message' => 'Created succesfully',
            'data' => $item
        ], 200);
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\Models\Todo  $todo
     * @return \Illuminate\Http\Response
     */
    public function show(Todo $todo)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Models\Todo  $todo
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Todo $todo)
    {
        $item = Todo::where('id', $todo->id)->first();
        $item->todo = $request->todo;
        $item->save();
        if ($item) {
            return response()->json([
                'message' => $item,
            ], 200);
        } else {
            return response()->json([
                'message' => 'Not found',
            ], 404);
        }
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Models\Todo  $todo
     * @return \Illuminate\Http\Response
     */
    public function destroy(Todo $todo)
    {
        $item = Todo::where('id', $todo->id)->delete();
        if ($item) {
            return response()->json([
                'message' => $item,
            ], 200);
        } else {
            return response()->json([
                'message' => $item,
            ], 404);
        }
    }
}

api.php

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TodoController;

Route::apiResource('/todo', TodoController::class);

POST http://127.0.0.1:8000/api/todo[object%20Object] 404 (Not Found)
dispatchXhrRequest @ xhr.js?b50d:177
xhrAdapter @ xhr.js?b50d:13
dispatchRequest @ dispatchRequest.js?5270:52
Promise.then (async)
request @ Axios.js?0a06:61
Axios.<computed> @ Axios.js?0a06:87
wrap @ bind.js?1d2b:9
_callee2$ @ App.vue?234e:38
tryCatch @ runtime.js?96cf:63
invoke @ runtime.js?96cf:293
eval @ runtime.js?96cf:118
asyncGeneratorStep @ asyncToGenerator.js?1da1:3
_next @ asyncToGenerator.js?1da1:25
eval @ asyncToGenerator.js?1da1:32
eval @ asyncToGenerator.js?1da1:21
insertTodo @ App.vue?234e:38
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6917
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler (Promise/async): "Error: Request failed with status code 404"

found in

---> <App> at src/App.vue
       <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
eval @ vue.runtime.esm.js?2b0e:1856
Promise.catch (async)
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1856
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6917
vue.runtime.esm.js?2b0e:1888 Error: Request failed with status code 404
    at createError (createError.js?2d83:16)
    at settle (settle.js?467f:17)
    at XMLHttpRequest.handleLoad (xhr.js?b50d:62)
logError @ vue.runtime.esm.js?2b0e:1888
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
eval @ vue.runtime.esm.js?2b0e:1856
Promise.catch (async)
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1856
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6917

下記:php artisan route:list --path=api/todoを実行

+--------+-----------+-----------------+--------------+---------------------------------------------+------------+ | Domain | Method | URI | Name | Action | Middleware | +--------+-----------+-----------------+--------------+---------------------------------------------+------------+ | | GET|HEAD | api/todo | todo.index | App\Http\Controllers\TodoController@index | api | | | POST | api/todo | todo.store | App\Http\Controllers\TodoController@store | api | | | GET|HEAD | api/todo/{todo} | todo.show | App\Http\Controllers\TodoController@show | api | | | PUT|PATCH | api/todo/{todo} | todo.update | App\Http\Controllers\TodoController@update | api | | | DELETE | api/todo/{todo} | todo.destroy | App\Http\Controllers\TodoController@destroy | api | +--------+-----------+-----------------+--------------+---------------------------------------------+------------+ 

Comments

[Lulucom]

例えば、POSTリクエストしている部分を以下のようにするとどうでしょうか。
await axios.post("http://127.0.0.1:8000/api/todo", sendData);

[abrt29]

そのURLで実行しましたがエラー内容が代わり404番のエラーが発生しました。

[Lulucom]

php artisan route:list --path=api/todo コマンドの結果も質問へ掲載可能でしょうか。

[abrt29]

+--------+-----------+-----------------+--------------+---------------------------------------------+------------+
| Domain | Method | URI | Name | Action | Middleware |
+--------+-----------+-----------------+--------------+---------------------------------------------+------------+
| | GET|HEAD | api/todo | todo.index | App\Http\Controllers\TodoController@index | api |
| | POST | api/todo | todo.store | App\Http\Controllers\TodoController@store | api |
| | GET|HEAD | api/todo/{todo} | todo.show | App\Http\Controllers\TodoController@show | api |
| | PUT|PATCH | api/todo/{todo} | todo.update | App\Http\Controllers\TodoController@update | api |
| | DELETE | api/todo/{todo} | todo.destroy | App\Http\Controllers\TodoController@destroy | api |
+--------+-----------+-----------------+--------------+---------------------------------------------+------------+
このように表示されております！

[Lulucom]

ありがとうございます。
質問を後から編集できますので、見やすいように質問へ追記していただければと思います。

todo.storeのルートはちゃんとあるのに404エラーになるのは変ですね・・・

> 404番のエラーが発生しました。
そのとき他にも色々とエラー情報が出力されているかと思うのですが、質問へ掲載可能でしょうか。公開したくないところを隠していただいて大丈夫です。

[abrt29]

問題を修正いたしました。
追記の仕方がLulucomさんが思ってるようなやり方ではないのかもしれませんがご確認お願いします、、、

[Lulucom]

ありがとうございます。質問の編集がまだされていないようなのですが・・・

[abrt29]

申し訳ございません。修正が反映されていませんでした。反映されたと思いますのでご確認お願いします。

[Lulucom]

ありがとうございます。404エラーの方は原因わかりました。「,」（カンマ）にすべきところを「.」（ドット）にしてしまったためではないでしょうか。sendDataの直前はカンマです。修正してみてください。
await axios.post("http://127.0.0.1:8000/api/todo", sendData);

[abrt29]

無事実装したかったこと（追加・更新・削除）が実装できました！親身になって解決してくださり、本当に感謝いたします！ベストアンサーをつけさせていただきたいので回答の方にもう一度ご記入いただけますでしょうか

Answer 1

POSTリクエストしている部分を以下のようにするとどうでしょうか。

await axios.post("http://127.0.0.1:8000/api/todo", sendData);

参考: https://github.com/axios/axios#request-method-aliases

Comments

[abrt29]

何度も何度もありがとうございました！フォローさせて頂きましたので今後ともよろしくお願いいたします！

[Lulucom]

ありがとうございます^ ^