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

  1. バックエンド
  2. 1747 view

Laravelで爆速API開発シリーズ「CORS編」

最終更新日:2019/02/14

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

クロスドメイン制約とは

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

開発時の問題点

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

  • フロントエンドエンジニアの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.
riri

riri

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

バックエンドの最近記事

  1. 人気急上昇中のLaravelをはじめよう!【徹底解説】

  2. Laravelの認可を理解して実装してみよう!

  3. Laravelのシーティング(Seeding)機能をマスターしよう!

  4. Laravelのメール確認機能を設定してみよう!

  5. Laravelの認証機能を設定してみよう!

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP