質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.39%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JWT(JSON Web Token)

JWT(JSON Web Token)とは、JSONをベースとしたアクセストークンの仕様。電子署名付きのURL safeなJSONのことを指します。電子署名が付いているため、改ざんをチェックできる点がメリットです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

Q&A

解決済

1回答

334閲覧

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

junichiKato072

総合スコア1

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JWT(JSON Web Token)

JWT(JSON Web Token)とは、JSONをベースとしたアクセストークンの仕様。電子署名付きのURL safeなJSONのことを指します。電子署名が付いているため、改ざんをチェックできる点がメリットです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

0グッド

0クリップ

投稿2024/04/18 12:41

編集2024/04/18 13:18

実現したいこと

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

前提

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

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

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

該当のソースコード

api.php

PHP

1Route::options('{any}', function () { 2 return response('', 200) 3 ->header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT, DELETE') 4 ->header('Access-Control-Allow-Headers', 'Content-Type, Authorization'); 5})->where('any', '.*'); 6 7Route::post('/auth/register', [\App\Http\Controllers\AuthController::class, 'register']);

CorsMiddleware.php

PHP

1<?php 2 3namespace App\Http\Middleware; 4 5use Closure; 6 7class CorsMiddleware 8{ 9 public function handle($request, Closure $next) 10 { 11 return $next($request) 12 ->header('Access-Control-Allow-Origin', '*') 13 ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS') 14 ->header('Access-Control-Allow-Headers', 'Content-Type, Authorization'); 15 } 16}

Kernel.php

PHP

1<?php 2 3namespace App\Http; 4 5use Illuminate\Foundation\Http\Kernel as HttpKernel; 6 7class Kernel extends HttpKernel 8{ 9 /** 10 * The application's global HTTP middleware stack. 11 * 12 * These middleware are run during every request to your application. 13 * 14 * @var array<int, class-string|string> 15 */ 16 protected $middleware = [ 17 // \App\Http\Middleware\TrustHosts::class, 18 \App\Http\Middleware\TrustProxies::class, 19 \Illuminate\Http\Middleware\HandleCors::class, 20 \App\Http\Middleware\PreventRequestsDuringMaintenance::class, 21 \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class, 22 \App\Http\Middleware\TrimStrings::class, 23 \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class, 24 \App\Http\Middleware\CorsMiddleware::class, 25 ]; 26 27 /** 28 * The application's route middleware groups. 29 * 30 * @var array<string, array<int, class-string|string>> 31 */ 32 protected $middlewareGroups = [ 33 'web' => [ 34 \App\Http\Middleware\EncryptCookies::class, 35 \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class, 36 \Illuminate\Session\Middleware\StartSession::class, 37 \Illuminate\View\Middleware\ShareErrorsFromSession::class, 38 \App\Http\Middleware\VerifyCsrfToken::class, 39 \Illuminate\Routing\Middleware\SubstituteBindings::class, 40 ], 41 42 'api' => [ 43 \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class, 44 'throttle:api', 45 \Illuminate\Routing\Middleware\SubstituteBindings::class, 46 \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class, 47 ], 48 ]; 49 50 /** 51 * The application's route middleware. 52 * 53 * These middleware may be assigned to groups or used individually. 54 * 55 * @var array<string, class-string|string> 56 */ 57 protected $routeMiddleware = [ 58 'auth' => \App\Http\Middleware\Authenticate::class, 59 'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class, 60 'auth.session' => \Illuminate\Session\Middleware\AuthenticateSession::class, 61 'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class, 62 'can' => \Illuminate\Auth\Middleware\Authorize::class, 63 'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class, 64 'password.confirm' => \Illuminate\Auth\Middleware\RequirePassword::class, 65 'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class, 66 'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class, 67 'verified' => \App\Http\Middleware\EnsureEmailIsVerified::class, 68 ]; 69}

AuthController.php

PHP

1<?php 2 3namespace App\Http\Controllers; 4 5use Illuminate\Http\Request; 6use App\Models\User; 7use Illuminate\Support\Facades\Hash; 8 9class AuthController extends Controller 10{ 11 public function register(Request $request) 12 { 13 $user = new User(); 14 $user->name = $request->input('username'); 15 $user->email = $request->input('email'); 16 $user->password = Hash::make($request->input('password')); 17 $user->save(); 18 19 return response()->json(['message' => 'User registered successfully'], 201); 20 } 21}

auth.js

JavaScript

1import axios from "axios"; 2 3class AuthApi { 4 login(user) { 5 return axios.post("auth/login", user).then((response) => { 6 if (response.data.access_token) { 7 localStorage.setItem("user", JSON.stringify(response.data)); 8 } 9 axios.defaults.headers.common["Authorization"] = 10 "Bearer " + response.data.access_token; 11 return response.data; 12 }); 13 } 14 15 logout() { 16 axios.post("auth/logout"); 17 localStorage.removeItem("user"); 18 } 19 20 get_login_user(token) { 21 return axios.post( 22 "auth/get_login_user", 23 {}, 24 { 25 headers: { 26 Authorization: "Bearer " + token, 27 }, 28 } 29 ); 30 } 31 32 register(user) { 33 return axios.post("auth/register", user); 34 } 35} 36 37export default new AuthApi();

試したこと

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

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

Laravel 10.10
Vue.js 3.3.4

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

php

1Route::post('/auth/register', [\App\Http\Controllers\AuthController::class, 'register']); 2 3Route::options('{any}', function () { 4 return response('', 200) 5 ->header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT, DELETE') 6 ->header('Access-Control-Allow-Headers', 'Content-Type, Authorization'); 7})->where('any', '.*');

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

Laravel10ならconfig/cors.phpがあり
https://github.com/laravel/laravel/blob/10.x/config/cors.php
app/Http/Kernel.phpHandleCors::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.phpapiにも余計なことしている。全部戻す。

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

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

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

投稿2024/04/18 23:18

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

junichiKato072

2024/04/20 14:32

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.39%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問