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

実現したいこと

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

JavaScript
1
2async function  save() {
3
4        const headers = {"Content-Type": "application/json","Access-Control-Allow-Origin": "http://localhost:3000"};
5
6        const instance = axios.create({
7         baseURL : 'http://localhost',
8         headers:headers
9        });
10
11        try {
12          await instance.post('/players',reobj); 
13　　　　　　//playersというのはLaravelのコントローラーのルート名です
14　　　　　　reobjというオブジェクトデータをLaravel側に渡したいです
15        } catch (error) {
16          console.log(error)
17        }
18      }

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

php
1
2
3public function __construct()
4    {
5       $this->middleware(CorsMiddleware::class); // CorsMiddlewareというミドルウェアを指定
6    }
7
8public function savePlayers(Request $request) 
9    {   
10      
11        $playersData = $request->all();
12        $jsonData = json_encode($playersData);　
13　　　　//フロントからのリクエストをjsonとして受け取りたい
14        file_put_contents('players_list.json', $jsonData);
15       //既存のJsonファイルにデータを保存
16          
17    }
18

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

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

php
1
2namespace App\Http\Middleware;
3
4use Closure;
5use Illuminate\Http\Request;
6use Symfony\Component\HttpFoundation\Response;
7
8class CorsMiddleware
9{
10    /**
11     * Handle an incoming request.
12     *
13     * @param  \Closure(\Illuminate\Http\Request): (\Symfony\Component\HttpFoundation\Response)  $next
14     */
15    public function handle(Request $request, Closure $next): Response
16    {
17        $headers = [
18            'Access-Control-Allow-Origin'      => 'http://localhost:3000',
19            'Access-Control-Allow-Methods'     => 'GET, POST, PUT, DELETE, OPTIONS',
20            'Access-Control-Allow-Headers'     => '*',
21        ];
22
23       //上記でヘッダーの設定を加えてあげることでLaravelへのアクセスを許可しようとしております。
24
25        if ($request->isMethod('OPTIONS')) {
26            return response()->json('OK', 200, $headers);
27        }
28
29        $response = $next($request);
30        foreach ($headers as $key => $value) {
31            $response->header($key, $value);
32        }
33
34        return $response;
35
36    }
37}
38
39

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

php
1'api' => [
2            \App\Http\Middleware\CorsMiddleware::class, 　
3        ],
4

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

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

以上の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.

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

php
1Route::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を使えば何もしなくても失敗しない。

投稿2023/10/20 00:16

kawax

総合スコア10377

irebasunglass

2023/10/20 10:34

回答ありがとうございました。ミドルウェアの設定はいらなかったですね。フロントで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'); //追加分しかしながら同じエラーが起こってしまいます表記の仕方は正しいのでしょうか？

行動規範の内容に同意します