概要
LaravelでCORS(Cross-Origin Resource Sharing)に対応する方法をまとめました。 クライアントサイドはReact, axiosを使用します。 前提知識としては、CORSのリクエスト形態、シンプルなリクエスト方法と、preflightを使用するリクエスト方法の違いを抑えておけば良いかと思います。 RESTfulAPIの場合は基本的にはpreflightを使用するリクエスト形式かと思います。 この記事では、preflightを使用するリクエストに対応する例を取り上げます。
環境
CORSなので当たり前ですが、apiとwebでドメインを用意しています。
api.hogehogedomainとadmin.hogehogedomainみたいな感じでドメインが用意されていて、adminの方から別ドメインで管理されているAPIをコールする、といった感じです。
Middlewareを用意する
APIを提供している側、Laravel側でAPIリクエスト時にヘッダ情報を調整するmiddlewareを用意します。
と、ここで自作のミドルウェアを作成したかったのですが、何故か更新系のメソッドだけ上手く動作しなかったので、barryvdh/laravel-corsを使うことにします。
セットアップはREADME通りです。
composer require barryvdh/laravel-cors
config/app.phpのprovider配列に以下を指定
Barryvdh\Cors\ServiceProvider::class,
app/Http/Kernel.phpのapiミドルウェアグループにcorsミドルウェアを設定
設定ファイルをパブリッシュして編集。
php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"
config/cors.php
クッキーの送信およびBasic認証の許可しておきたいので、 supportsCredentialsをtrueにしておきます。
サーバー側の設定は以上です。
クライアントサイドからAPIをコールしてみる
axiosでヘッダ情報の定義をしておきます。
action/index.js
クライアント側では、X-Requested-Withヘッダをセットするだけで、後は普通にapiを叩くだけです。
所感
自作ミドルウェアがなぜ上手くいかなかったのか解決できていないので消化不良ですが、一旦はこれで問題ないでしょう。。