フロントで作ったオブジェクトをLaravel10でのコントローラーファイル投げたいがcorsエラーになる

Question

実現したいこと

React(localhost:3000)で生成したオブジェクトLaravel10のコントローラーファイルにを投げてjsonを生成したいと思っております。

async function  save() {

        const headers = {"Content-Type": "application/json","Access-Control-Allow-Origin": "http://localhost:3000"};

        const instance = axios.create({
         baseURL : 'http://localhost',
         headers:headers
        });

        try {
          await instance.post('/players',reobj); 
　　　　　　//playersというのはLaravelのコントローラーのルート名です
　　　　　　reobjというオブジェクトデータをLaravel側に渡したいです
        } catch (error) {
          console.log(error)
        }
      }

コントローラーでリクエストを受け取りたいと考えております。

public function __construct()
    {
       $this->middleware(CorsMiddleware::class); // CorsMiddlewareというミドルウェアを指定
    }

public function savePlayers(Request $request) 
    {   
      
        $playersData = $request->all();
        $jsonData = json_encode($playersData);　
　　　　//フロントからのリクエストをjsonとして受け取りたい
        file_put_contents('players_list.json', $jsonData);
       //既存のJsonファイルにデータを保存
          
    }

本題に入りますが、ミドルウェアを使用してheaderに設定を追加してcorsエラーを解決したいと考えました

CorsMiddlewareというミドルウェアを作成して
下記のようなコードを加えました。

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\Response;

class CorsMiddleware
{
    /**
     * Handle an incoming request.
     *
     * @param  \Closure(\Illuminate\Http\Request): (\Symfony\Component\HttpFoundation\Response)  $next
     */
    public function handle(Request $request, Closure $next): Response
    {
        $headers = [
            'Access-Control-Allow-Origin'      => 'http://localhost:3000',
            'Access-Control-Allow-Methods'     => 'GET, POST, PUT, DELETE, OPTIONS',
            'Access-Control-Allow-Headers'     => '*',
        ];

       //上記でヘッダーの設定を加えてあげることでLaravelへのアクセスを許可しようとしております。

        if ($request->isMethod('OPTIONS')) {
            return response()->json('OK', 200, $headers);
        }

        $response = $next($request);
        foreach ($headers as $key => $value) {
            $response->header($key, $value);
        }

        return $response;

    }
}

Larabelのコントローラーファイルにアクセスをするためにミドルウェアを作成し
Kernel.phpに下記のようにクラスを追加しました。```ここに言語を入力

'api' => [
            \App\Http\Middleware\CorsMiddleware::class, 　
        ],

web.phpでPlayersControllerという今回使用するコントローラーに対して以下のように記述しました

Route::post('/players', 'App\Http\Controllers\PlayersController@savePlayers')->middleware('cors');　
//こちらがアクセスを許可したいコントローラー

以上のcorsを許可するミドルウェアを作成し適用したつもりでしたが下記のエラーに至ります

Access to XMLHttpRequest at 'http://localhost/players' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

よろしくお願いいたします

Answer 1

Laravel10なら最初からCORS対応してるのでCorsMiddlewareとかは不要。古い間違った情報を参照している。
https://laravel.com/docs/10.x/routing#cors

web.phpではなくroutes/api.phpに書く。

Route::post('/players'

URLはhttp://localhost/api/players フロントからはこれを指定。
今はweb側に書いてるからできてない。

api/以下なら全部許可、はconfig/cors.phpで設定している。
https://github.com/laravel/laravel/blob/10.x/config/cors.php
api.phpを使えば何もしなくても失敗しない。

Comments

[irebasunglass]

回答ありがとうございました。ミドルウェアの設定はいらなかったですね。
フロントでhttp://localhost/api/playersと指定し 、api.phpに以下のように貼り付けました
Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
return $request->user(); //デフォルトのルーティング
});

Route::post('/players', 'App\Http\Controllers\PlayersController@savePlayers'); //追加分

しかしながら同じエラーが起こってしまいます
表記の仕方は正しいのでしょうか？