laravel8のAPIで、CORS(Cross-Origin Resource Sharing = 異なるドメインからでもAPIが使える)に対応する。

【追記】
laravel8はデフォルトでcorsが実装されており、APIは認証ありになっている！
config/cors.phpの値を以下のように変更したら、corsエラーは出なくなった。

<?php

return [

    //'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'paths' => ['*'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    //'supports_credentials' => false,    
    'supports_credentials' => true,    
];

<?php

return [

//'paths' => ['api/*', 'sanctum/csrf-cookie'],

'paths' => ['*'],

'allowed_methods' => ['*'],

'allowed_origins' => ['*'],

'allowed_origins_patterns' => [],

'allowed_headers' => ['*'],

'exposed_headers' => [],

'max_age' => 0,

//'supports_credentials' => false,

'supports_credentials' => true,

];

Laravel8でCORSが失敗するくだらない理由

デフォルトだと同じドメインでないとAPIが使えない。エラーになる。
laravel側で、ヘッダーで許可を出してあげればOK

1, middleware(リクエスト＆レスポンスの処理をする所)を作る。

php artisan make:middleware Cors

1	php artisan make:middleware Cors

2, 許可ヘッダーの設定を行う
app/Http/Middleware/Cors.php

public function handle(Request $request, Closure $next)
{
    //return $next($request);
    return $next($request)
      //->header('Access-Control-Allow-Origin', 'http://localhost:8080')
        ->header('Access-Control-Allow-Origin', '*') //どのOriginを許可するか設定
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS') // 許可するメソッド
        ->header('Access-Control-Allow-Headers', 'Content-Type'); // 許可するHTTPヘッダー
}

public function handle(Request $request, Closure $next)

{

//return $next($request);

return $next($request)

//->header('Access-Control-Allow-Origin', 'http://localhost:8080')

->header('Access-Control-Allow-Origin', '*') //どのOriginを許可するか設定

->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS') // 許可するメソッド

->header('Access-Control-Allow-Headers', 'Content-Type'); // 許可するHTTPヘッダー

}

3, 自作ミドルウェアをlaravelに組み込む
app/Http/Kernel.php

protected $routeMiddleware = [
    /// ....

    'cors' => \App\Http\Middleware\Cors::class,
];

protected $routeMiddleware = [

/// ....

'cors' => \App\Http\Middleware\Cors::class,

];

4, apiのルーティングに仕込む
routes/api.php

// CORS対応(どのオリジンからでもOK)
Route::group(['middleware' => ['api', 'cors']], function(){
    Route::Resource('memo', MemoController::class);
});

// CORS対応(どのオリジンからでもOK)

Route::group(['middleware' => ['api', 'cors']], function(){

Route::Resource('memo', MemoController::class);

});

簡単、簡単！
テスト用には、この方が良いけど、本番運用では同じオリジンだけにした方が良いよな～。

関連記事