こんにちは ひこにきです
Laravel11でのCORSの設定方法と各環境別に設定を切り分ける方法について説明します
設定ファイル config/cors.php の作成方法
Laravel11 では config配下に cors.php は配置されておらず、publish する必要があります。 artisan コマンドを使って corsの設定ファイルを生成しましょう
cors.php を publish する artisan コマンド
php artisan config:publish corscors.php の初期設定
<?php
return [
/*
|--------------------------------------------------------------------------
| Cross-Origin Resource Sharing (CORS) Configuration
|--------------------------------------------------------------------------
|
| Here you may configure your settings for cross-origin resource sharing
| or "CORS". This determines what cross-origin operations may execute
| in web browsers. You are free to adjust these settings as needed.
|
| To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
|
*/
'paths' => ['api/*', 'sanctum/csrf-cookie'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => false,
];Laravel の初期設定では api のroutingは api/* とパスが指定されており、 cors の paths 設定についても「api/*」 が設定されています。
allowed_methods、allowed_origins、allowed_headers は * で全て許可となってます。
環境設定ファイル（.env）でCORS設定する方法
cors.php の修正
'allowed_methods' => explode(',',env('CORS_ALLOWED_METHODS', '*')),
'allowed_origins' => explode(',',env('CORS_ALLOWED_ORIGINS', '*')),
'allowed_origins_patterns' => [],
'allowed_headers' => explode(',',env('CORS_ALLOWED_HEADERS', '*')),allowed_methods、allowed_origins、allowed_headers を環境設定ファイルの値を設定するように修正します。
元々配列での設定する項目のため .env ファイルに csv形式で複数設定可能とし explode関数で 設定値を配列化してます。
未設定時のデフォルト値は * になります
環境設定ファイル（.env）への項目追加（設定）
# CORS設定
CORS_ALLOWED_ORIGINS=https://hikoniki.com,https://hoge.hikoniki.com
CORS_ALLOWED_METHODS=POST,GET,PATCH,OPTIONS
CORS_ALLOWED_HEADERS=*※（設定値はあくまでサンプルとなりますので参考にしてください）
上記の項目を 各環境の .env{.app_env} に追加して環境毎の設定をしてください
以上、Laravelでの環境別CORS設定の方法について説明しました。
おまけ CORSエラー対応
上記まででCORS設定については完了ですが、フロントエンジニアより特定のAPIだけ、CORSのエラーが発生するとのことで調べてみました。
特定のAPIだけ？？解せないと思いつつエラーメッセージを確認すると以下のようでした
Access to fetch at ‘https://hoge.com’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: Redirect is not allowed for a preflight request.
結論から言うとCORS設定は正しかったのですが、フロントから呼び出すAPIのエンドポイントの末尾に「/」が余計についていたため、リダイレクトが発生して上記のエラーが発生していました
コメント