現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます！

Laravelで爆速API開発シリーズ第五弾は「CORS」です！API開発がある程度進みフロントエンド側のAPI連携を始めるとき問題になるのがブラウザのクロスドメイン制約。今回はCORSの設定について解説しますが、用語も丁寧に説明するのでご安心ください！

クロスドメイン制約とは

セキュリティ上の理由によりhtmlをダウンロードしたドメインと異なるドメインのAPIにAjaxリクエストを送ると拒否されるというもの

開発時の問題点

API開発は基本的にローカルで行いますが、フロントエンドエンジニアがそのAPIとの連携を実装するとき大きく分けて以下の２種類の方法があります。

• フロントエンドエンジニアのPCにAPIのローカル環境を用意する

• APIをテスト用に公開してフロントエンドエンジニアに叩いてもらう

いずれの場合もフロントエンドエンジニアが開発しているフロントのホストとAPIのホストが違うためブラウザで先ほど説明したクロスドメイン制約に引っかかりAPIをコールできません。

CORSの導入

インストール

barryvdh/laravel-corsのライブラリを使います。

composer require barryvdh/laravel-cors

app/Http/Kernel.phpに以下を記述します。

protected $middlewareGroups = [
    'web' => [
       // ...
    ],

    'api' => [
        // ...
        \Barryvdh\Cors\HandleCors::class,
    ],
];

設定

php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"

を実行します。

config/cors.phpが生成されるので例えば以下のようにしましょう。

return [
     /*
     |--------------------------------------------------------------------------
     | Laravel CORS
     |--------------------------------------------------------------------------
     |
     | allowedOrigins, allowedHeaders and allowedMethods can be set to array('*')
     | to accept any value.
     |
     */
    'supportsCredentials' => false,
    'allowedOrigins' => ['*'],
    'allowedHeaders' => ['Content-Type', 'X-Requested-With'],
    'allowedMethods' => ['*'], // ex: ['GET', 'POST', 'PUT',  'DELETE']
    'exposedHeaders' => [],
    'maxAge' => 0,
]

以上です。お疲れ様です。

Laravelのおすすめ本紹介

Laravelで爆速API開発シリーズ以外にも、Laravelの理解を深めたい方にはこちらの本がおすすめです！

PHPフレームワーク Laravel Webアプリケーション開発 バージョン5.5 LTS対応

Laravelの本は数多く出版されていますが、この本が断然わかりやすいと思います！

Laravelマスターを目指すならぜひ一度ご覧になってみるといいと思います。

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

WINDII

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。 日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！ また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

最新記事 by WINDII (全て見る)

• Canvaが最高すぎる。使い方を完全ガイド【チュートリアルあり】 - 2019年5月14日
• 人気急上昇中のLaravelをはじめよう！【徹底解説】 - 2019年4月23日
• Laravelの認可を理解して実装してみよう！ - 2019年3月29日