The GET method is not supported for this route. Supported methods: POST. と表示されて処理が止まってしまう。

実現したいこと

前提

LaravelとNuxt.jsでユーザーの新規登録機能を作っており、フロントで必要事項を入力してからバックにデータを送る際にエラーが発生しています。

発生している問題・エラーメッセージ

The GET method is not supported for this route. Supported methods: POST.

該当のソースコード

api.php

1<?php 2 3use Illuminate\Http\Request; 4use Illuminate\Support\Facades\Route; 5use App\Http\Controllers\AuthController; 6use App\Http\Controllers\PictureController; 7 8/* 9|-------------------------------------------------------------------------- 10| API Routes 11|-------------------------------------------------------------------------- 12| 13| Here is where you can register API routes for your application. These 14| routes are loaded by the RouteServiceProvider within a group which 15| is assigned the "api" middleware group. Enjoy building your API! 16| 17*/ 18 19 20//Route::post('/',[PictureController::class, 'postPicture']); 21 22 23Route::group([ 24 'middleware' => ['auth:api'], 25 'prefix' => 'auth' 26 ], function ($router) { 27 Route::post('register', [AuthController::class, 'register'])->withoutMiddleware(['auth:api']); 28 Route::post('login', [AuthController::class, 'login'])->withoutMiddleware(['auth:api']); 29 Route::post('logout', [AuthController::class, 'logout']); 30 Route::post('refresh', [AuthController::class, 'refresh']); 31 Route::get('user', [AuthController::class, 'me']); 32});

AuthController.php（認証関係コントローラ）

1<?php 2 3namespace App\Http\Controllers; 4 5use Illuminate\Support\Facades\Auth; 6use App\Http\Controllers\Controller; 7use Illuminate\Http\Request; 8use App\Models\User; 9use Illuminate\Support\Facades\Hash; 10 11class AuthController extends Controller 12{ 13 public function __construct() 14 { 15 $this->middleware('auth:api', ['except' => ['login']]); 16 } 17 18 public function register(Request $request) 19 { 20 21 22 User::create([ 23 "name" => $request->name, 24 "email" => $request->email, 25 "password" => Hash::make($request->password), 26 "follows_count" => 0, 27 "followers_count" => 0, 28 ]); 29 30 return response()->json(['message' => 'Successfully user create']); 31 } 32 33 public function login() 34 { 35 $credentials = request(['email', 'password']); 36 37 if (! $token = auth()->attempt($credentials)) { 38 return response()->json(['error' => 'Unauthorized'], 401); 39 } 40 41 return $this->respondWithToken($token); 42 } 43 44 public function me() 45 { 46 return response()->json(auth()->user()); 47 } 48 49 public function logout() 50 { 51 auth()->logout(); 52 53 return response()->json(['message' => 'Successfully logged out']); 54 } 55 56 public function refresh() 57 { 58 return $this->respondWithToken(auth()->refresh()); 59 } 60 61 protected function respondWithToken($token) 62 { 63 return response()->json([ 64 'access_token' => $token, 65 'token_type' => 'bearer', 66 'expires_in' => auth()->factory()->getTTL() * 60 67 ]); 68 } 69}

register.vue(新規登録画面)

1<template> 2 <form @submit.prevent="register"> 3 <input type="text" v-model="name" placeholder="name" required /> 4 <input type="email" v-model="email" placeholder="email" required /> 5 <input type="password" v-model="password" placeholder="password" required /> 6 <button type="submit">送信</button> 7 </form> 8</template> 9 10<script> 11 export default { 12 auth: false, 13 data() { 14 return { 15 name: null, 16 email: null, 17 password: null, 18 }; 19 }, 20 methods: { 21 async register() { 22 try { 23 await this.$axios.post("http://localhost:8000/api/auth/register", { 24 name: this.name, 25 email: this.email, 26 password: this.password, 27 }); 28 this.$router.push("/login"); 29 } catch(error) { 30 console.log(error); 31 alert("メールアドレスがすでに登録されています"); 32 } 33 }, 34 }, 35 }; 36</script>

PictureController.php(画像投稿関連のコントローラ)

1<?php 2 3namespace App\Http\Controllers; 4 5use Illuminate\Support\Facades\Auth; 6use Illuminate\Http\Request; 7use App\Models\Picture; 8use App\Models\Tag; 9use App\Models\User; 10use Carbon\Carbon; 11 12class PictureController extends Controller 13{ 14 // public function __construct() 15 // { 16 // $this->middleware('auth:api'); 17 // } 18 19 public function postPicture(Request $request) 20 { 21 $user_id = $request->user_id; 22 $user = User::where('id',$request->user_id)->first(); 23 dd($request); 24 $picture = new Picture; 25 $date = Carbon::now(); 26 //getClientOriginalNameの不具合、使い方調べる 27 $picture->create([ 28 'user_id' => $request->user_id, 29 'file_path' => $request->picture_name, 30 'title' => $request->title, 31 'tag_count' => 1, 32 'post_comment' => $request->post_comment, 33 ]); 34 35 $user->update([ 36 'last_uploaded' => $date, 37 ]); 38 39 $tag = Tag::firstOrCreate([ 40 'name' => $request->tag, 41 ]); 42 43 return response()->json([ 44 'picture' => $picture, 45 'tag' => $tag, 46 'user' => $user, 47 ], 201); 48 } 49}

index.vue（画像投稿画面）

1<template> 2 <div class="container"> 3 <main> 4 <label for="file"> 5 <input type="file" id="file" @change="fileSelected" /> 6 </label> 7 8 <label for="title"> 9 画像タイトル 10 <input type="text" placeholder="画像タイトル" id="title" name="title" v-model="newTitle"> 11 </label> 12 13 <textarea name="post_comment" id="" cols="30" rows="11" placeholder="投稿コメント" v-model="newPostComment"></textarea> 14 <label for="tag"> 15 タグ名 16 <input type="text" placeholder="タグ名" id="tag" name="tag" v-model="newTag"> 17 </label> 18 <button @click="fileUpload">投稿する</button> 19 </main> 20 </div> 21</template> 22 23<script> 24 export default { 25 data() { 26 return { 27 newTitle: "", 28 newPostComment: "", 29 newTag: "", 30 picture_name: null, 31 }; 32 }, 33 34 methods: { 35 fileSelected(event) { 36 this.picture = event.target.files[0] 37 }, 38 39 async fileUpload() { 40 // const formData = new FormData(); 41 // formData.append('picture', this.picture) 42 try{ 43 await this.$axios.post("http://127.0.0.1:8000/api", { 44 title: this.newTitle, 45 post_comment: this.newPostComment, 46 tag: this.newTag, 47 picture_name: this.picture.name, 48 user_id: this.$auth.user.id 49 }); 50 // this.$router.push("/"); 51 }catch(error){ 52 console.log(this.$auth.user.id); 53 console.log(this.picture.name); 54 console.log(error); 55 } 56 } 57 }, 58 } 59 60</script> 61 62<style> 63</style>

試したこと

PictureController.phpやindex.vueで画像投稿関係のコードを追加する以前は正常に新規登録できていました。
エラーメッセージからルーティング関係のエラーだと思ったので、api.php内でのPictureControllerに関するルート設定をコメントアウトしましたが変わりありませんでした。

補足情報（FW/ツールのバージョンなど）

Laravel 8.83.27
Nuxt.js 2.15.8