Laravel10&Vue3 ユーザ登録機能の実装について

Question

実現したいこと

ユーザ登録機能を実装したい！

前提

Laravel10とVue3を使ってCors設定を行い、register関数を実装しました。
しかし、画面側からregister関数を読んでいるはずなのですが、レスポンスが返ってきません。

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

The GET method is not supported for route api/auth/register. Supported methods: POST, OPTIONS.

該当のソースコード

api.php

Route::options('{any}', function () {
    return response('', 200)
        ->header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT, DELETE')
        ->header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
})->where('any', '.*');

Route::post('/auth/register', [\App\Http\Controllers\AuthController::class, 'register']);

CorsMiddleware.php

<?php

namespace App\Http\Middleware;

use Closure;

class CorsMiddleware
{
    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    }
}

Kernel.php

<?php

namespace App\Http;

use Illuminate\Foundation\Http\Kernel as HttpKernel;

class Kernel extends HttpKernel
{
    /**
     * The application's global HTTP middleware stack.
     *
     * These middleware are run during every request to your application.
     *
     * @var array<int, class-string|string>
     */
    protected $middleware = [
        // \App\Http\Middleware\TrustHosts::class,
        \App\Http\Middleware\TrustProxies::class,
        \Illuminate\Http\Middleware\HandleCors::class,
        \App\Http\Middleware\PreventRequestsDuringMaintenance::class,
        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
        \App\Http\Middleware\TrimStrings::class,
        \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
        \App\Http\Middleware\CorsMiddleware::class,
    ];

    /**
     * The application's route middleware groups.
     *
     * @var array<string, array<int, class-string|string>>
     */
    protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

        'api' => [
            \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
            'throttle:api',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
        ],
    ];

    /**
     * The application's route middleware.
     *
     * These middleware may be assigned to groups or used individually.
     *
     * @var array<string, class-string|string>
     */
    protected $routeMiddleware = [
        'auth' => \App\Http\Middleware\Authenticate::class,
        'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
        'auth.session' => \Illuminate\Session\Middleware\AuthenticateSession::class,
        'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
        'can' => \Illuminate\Auth\Middleware\Authorize::class,
        'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
        'password.confirm' => \Illuminate\Auth\Middleware\RequirePassword::class,
        'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
        'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
        'verified' => \App\Http\Middleware\EnsureEmailIsVerified::class,
    ];
}

AuthController.php

<?php

namespace App\Http\Controllers;

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

class AuthController extends Controller
{
    public function register(Request $request)
    {
        $user = new User();
        $user->name = $request->input('username');
        $user->email = $request->input('email');
        $user->password = Hash::make($request->input('password'));
        $user->save();

        return response()->json(['message' => 'User registered successfully'], 201);
    }
}

auth.js

import axios from "axios";

class AuthApi {
    login(user) {
        return axios.post("auth/login", user).then((response) => {
            if (response.data.access_token) {
                localStorage.setItem("user", JSON.stringify(response.data));
            }
            axios.defaults.headers.common["Authorization"] =
                "Bearer " + response.data.access_token;
            return response.data;
        });
    }

    logout() {
        axios.post("auth/logout");
        localStorage.removeItem("user");
    }

    get_login_user(token) {
        return axios.post(
            "auth/get_login_user",
            {},
            {
                headers: {
                    Authorization: "Bearer " + token,
                },
            }
        );
    }

    register(user) {
        return axios.post("auth/register", user);
    }
}

export default new AuthApi();

試したこと

Laravel側のパスを書き換えたり、Corsの設定を見直したりしました。

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

Laravel 10.10
Vue.js 3.3.4

ご回答いただけると幸いです。

Answer 1

いつものように参考情報を間違えてるから全部間違えてる質問。

端的にエラーの原因は'{any}'で「すべてのルート」を捕捉してるから。'/auth/register'の前にこっちが使われている。

Route::post('/auth/register', [\App\Http\Controllers\AuthController::class, 'register']);

Route::options('{any}', function () {
    return response('', 200)
        ->header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT, DELETE')
        ->header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
})->where('any', '.*');

解決方法は「すべてのルート」を最後に書く、ではない。
やってることが最初から全部間違ってるので目の前のエラーだけ解決しても何の意味もない。

Laravel10ならconfig/cors.phpがあり
https://github.com/laravel/laravel/blob/10.x/config/cors.php
app/Http/Kernel.phpにHandleCors::classがあり
https://github.com/laravel/laravel/blob/10.x/app/Http/Kernel.php#L19
ドキュメントも説明がある。
https://laravel.com/docs/10.x/routing#cors
最初からCORSのための機能があるのに自分でCorsMiddlewareを作るような完全に間違ったことをしている。見てる情報が古い。

Route::options('{any}'もCorsMiddlewareも不要なので全部元に戻す。
app/Http/Kernel.phpのapiにも余計なことしている。全部戻す。

その上でLaravelでの正しい方法は…前提条件によって変わる

• フロントとバックエンドがトップレベルドメインが同じサブドメインexample.com api.example.com間ならSanctumのSPA認証を使う。
• 全く別のドメインならSPA認証は使えないのでCSRFを部分的に無効化するしかなさそう。

フロントとバックエンドを分けても普通はSPA認証が使える条件を満たすのでSanctumを使えばいい。

Comments

[junichiKato072]

ご回答ありがとうございます。たしかに、cors.phpというファイルが存在しました。調査が甘かったことを反省しています。