どうも、シローです。
異なるサーバの間でAPIリクエストを送るときには、CORSポリシーに引っかかってリクエストが弾かれる場合があります。
今回は、Laravelのサーバに対してAPIリクエストを送るときにCORSエラーを回避する方法をまとめます。
実行環境
| OS | Ubuntu 16.04 |
| Laravel Version | 5.7 |
| PHP Version | 7.2 |
システム構成図
Firebaseにホスティングされているサイトから、Laravelのサーバに対してAPIリクエストを発行しますので、
上の図のような構成になってます。
Composerでlaravel-corsをインストール
Laravelに対してのCORSのリクエストを回避するためのモジュールとしてlaravel-corsをインストールします。
|
1 |
shiro@mac laravel-project $ composer require spatie/laravel-cors |
Laravelプロジェクト上でCORSエラー回避のための設定を行う
laravel-corsをインストールしたら、 Kernel.phpにサーバにAPIをリクエストするときに必ずlaravel-corsを使用する設定を追加します。
|
1 2 3 4 5 6 |
// app/Http/Kernel.php protected $middleware = [ ... \Spatie\Cors\Cors::class // ここに追加すると、リクエストの度にlaravel-corsを適用する ]; |
その次にartisanコマンドで設定ファイルをconfig.phpとして作成します。
|
1 |
php artisan vendor:publish --provider="Spatie\Cors\CorsServiceProvider" --tag="config" |
作成したらconfig.phpを編集して、firebaseのプロジェクトのホストを追記します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
return [ /* * A cors profile determines which origins, methods, headers are allowed for * a given requests. The `DefaultProfile` reads its configuration from this * config file. * * You can easily create your own cors profile. * More info: https://github.com/spatie/laravel-cors/#creating-your-own-cors-profile */ 'cors_profile' => Spatie\Cors\CorsProfile\DefaultProfile::class, /* * This configuration is used by `DefaultProfile`. */ 'default_profile' => [ 'allow_credentials' => false, 'allow_origins' => [ 'http://localhost:5000', // <- ここはLaravelにAPIリクエストを送るサーバのホスト部分を入力する ], 'allow_methods' => [ 'POST', 'GET', 'OPTIONS', 'PUT', 'PATCH', 'DELETE', ], |
これで設定は完了です。
あとは、クライアントサイドからLaravelサイドにリクエストを送ってみたら、CORSエラーは回避できていると思います。
(クライアントサイドからAPIリクエストを送る実装は割愛します）
