Laravelでクロスオリジン（CORS）に対応する方法！安全で適切な設定【barryvdh/laravel-cors】

Laravelでクロスオリジン（CORS）に対応するために「barryvdh/laravel-cors」を使ってみましょう。この記事では「barryvdh/laravel-cors」の導入方法と適切な設定について解説します。

Contents

barryvdh/laravel-corsを導入

comoserでインストール

comoserで「barryvdh/laravel-cors」を入れていきます。

$ composer require barryvdh/laravel-cors

1	$ composer require barryvdh/laravel-cors

Laravelのバージョンが5.5未満の場合にはバージョンを指定します。

$ composer require barryvdh/laravel-cors:0.11.0

1	$ composer require barryvdh/laravel-cors:0.11.0

Middlewareに追加

「app/Http/Kernel.php」の「$middleware」に「\Barryvdh\Cors\HandleCors::class」を追加します。

<?php

namespace App\Http;

use Illuminate\Foundation\Http\Kernel as HttpKernel;

class Kernel extends HttpKernel
{
    /**
     * The application's global HTTP middleware stack.
     *
     * These middleware are run during every request to your application.
     *
     * @var array
     */
    protected $middleware = [
        \App\Http\Middleware\TrustProxies::class,
        \App\Http\Middleware\CheckForMaintenanceMode::class,
        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
        \App\Http\Middleware\TrimStrings::class,
        \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
        \Barryvdh\Cors\HandleCors::class,
    ];

    /**
     * The application's route middleware groups.
     *
     * @var array
     */
    protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            // \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

        'api' => [
            'throttle:60,1',
            'bindings',
        ],
    ];

    /**
     * The application's route middleware.
     *
     * These middleware may be assigned to groups or used individually.
     *
     * @var array
     */
    protected $routeMiddleware = [
        'auth' => \App\Http\Middleware\Authenticate::class,
        'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
        'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,
        'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
        'can' => \Illuminate\Auth\Middleware\Authorize::class,
        'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
        'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
        'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
        'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
    ];

    /**
     * The priority-sorted list of middleware.
     *
     * This forces non-global middleware to always be in the given order.
     *
     * @var array
     */
    protected $middlewarePriority = [
        \Illuminate\Session\Middleware\StartSession::class,
        \Illuminate\View\Middleware\ShareErrorsFromSession::class,
        \App\Http\Middleware\Authenticate::class,
        \Illuminate\Routing\Middleware\ThrottleRequests::class,
        \Illuminate\Session\Middleware\AuthenticateSession::class,
        \Illuminate\Routing\Middleware\SubstituteBindings::class,
        \Illuminate\Auth\Middleware\Authorize::class,
    ];
}

protected $middleware = [

\App\Http\Middleware\TrustProxies::class,

\App\Http\Middleware\CheckForMaintenanceMode::class,

\Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,

\App\Http\Middleware\TrimStrings::class,

\Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,

\Barryvdh\Cors\HandleCors::class,

];

APIのみにCORSを設定する場合などは$middlewareGroupsのapiに追加します。

configファイルを作成

下記コマンドを実行します。

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

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

「vendor/barryvdh/laravel-cors/config/cors.php」を元に「config/cors.php」が作成されます。

CORSのための設定

生成された「config/cors.php」はデフォルトの設定なので編集していきます。

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Laravel CORS
    |--------------------------------------------------------------------------
    |
    | allowedOrigins, allowedHeaders and allowedMethods can be set to array('*')
    | to accept any value.
    |
    */
   
    'supportsCredentials' => false,
    'allowedOrigins' => ['*'],
    'allowedOriginsPatterns' => [],
    'allowedHeaders' => ['*'],
    'allowedMethods' => ['*'],
    'exposedHeaders' => [],
    'maxAge' => 0,

];

<?php

return [

|--------------------------------------------------------------------------

| Laravel CORS

|--------------------------------------------------------------------------

| allowedOrigins, allowedHeaders and allowedMethods can be set to array('*')

| to accept any value.

'supportsCredentials' => false,

'allowedOrigins' => ['*'],

'allowedOriginsPatterns' => [],

'allowedHeaders' => ['*'],

'allowedMethods' => ['*'],

'exposedHeaders' => [],

'maxAge' => 0,

];

supportsCredentials

Cookie、承認ヘッダー、または TLS クライアント証明書などの許可設定です。
デフォルトは無効になります。

allowedOrigins

許可するアクセス元の指定です。デフォルトは全てになっているので注意！

'allowedOrigins' => env('APP_ENV', 'production') === 'production' ? [env('APP_FRONT_URL')] : ['*']

1	'allowedOrigins' => env('APP_ENV', 'production') === 'production' ? [env('APP_FRONT_URL')] : ['*']

上記のように本番環境以外では全て許可などにすると開発しやすいかも？その場合には.envに許可するURLを入れておきます。

allowedOriginsPatterns

allowedOriginsをパターン（正規表現）で指定することができます

allowedHeaders

許可するヘッダーを指定します。

allowedMethods

許可するHTTPメソッドを指定します。デフォルトは全て許可（*）です。
配列で複数を指定になっています。

'allowedMethods' => ['GET', 'PUT'],

1	'allowedMethods' => ['GET', 'PUT'],

exposedHeaders

レスポンスに含めるカスタム HTTP ヘッダ (デフォルトは含まれるヘッダ無し)

maxAge

キャッシュの有効期限の設定です。
秒数で指定します。

動作を確認

curlでリクエストして確認を行いましょう。
Originの指定で許可しているドメインからのアクセスを確認することができます。

アクセスできる場合

許可されているリクエストだった場合 200 OKが返ります。

$ curl -X GET -I -H "Origin: http://example.com" http://localhost:8000
HTTP/1.1 200 OK
Host: localhost:8000
Date: Sun, 06 Oct 2019 01:20:12 +0000
Connection: close
X-Powered-By: PHP/7.2.11
Cache-Control: no-cache, private
Date: Sun, 06 Oct 2019 01:20:12 GMT
Content-Type: text/html; charset=UTF-8
Access-Control-Allow-Origin: http://example.com
Vary: Origin

$ curl -X GET -I -H "Origin: http://example.com" http://localhost:8000

HTTP/1.1 200 OK

Host: localhost:8000

Date: Sun, 06 Oct 2019 01:20:12 +0000

Connection: close

X-Powered-By: PHP/7.2.11

Cache-Control: no-cache, private

Date: Sun, 06 Oct 2019 01:20:12 GMT

Content-Type: text/html; charset=UTF-8

Access-Control-Allow-Origin: http://example.com

Vary: Origin

アクセスできない場合

許可されてないリクエストだった場合 403 Forbiddenが返ります。

$ curl -X GET -I -H "Origin: http://example.jp" http://localhost:8000
HTTP/1.0 403 Forbidden
Host: localhost:8000
Date: Sun, 06 Oct 2019 01:34:17 +0000
Connection: close
X-Powered-By: PHP/7.2.11
Cache-Control: no-cache, private
Date: Sun, 06 Oct 2019 01:34:17 GMT
Content-type: text/html; charset=UTF-8

$ curl -X GET -I -H "Origin: http://example.jp" http://localhost:8000

HTTP/1.0 403 Forbidden

Host: localhost:8000

Date: Sun, 06 Oct 2019 01:34:17 +0000

Connection: close

X-Powered-By: PHP/7.2.11

Cache-Control: no-cache, private

Date: Sun, 06 Oct 2019 01:34:17 GMT

Content-type: text/html; charset=UTF-8

Laravelでクロスオリジン（CORS）に対応する方法

barryvdh/laravel-corsを導入

comoserでインストール

Middlewareに追加

configファイルを作成

CORSのための設定

supportsCredentials

allowedOrigins

allowedOriginsPatterns

allowedHeaders

allowedMethods

exposedHeaders

maxAge

動作を確認

アクセスできる場合

アクセスできない場合

まとめ

この記事を書いた人

Laravelでクロスオリジン（CORS）に対応する方法

barryvdh/laravel-corsを導入

comoserでインストール

Middlewareに追加

configファイルを作成

CORSのための設定

supportsCredentials

allowedOrigins

allowedOriginsPatterns

allowedHeaders

allowedMethods

exposedHeaders

maxAge

動作を確認

アクセスできる場合

アクセスできない場合

まとめ

この記事を書いた人

関連記事

Laravelのパスワードリセットメールをオリジナルの文章・デザインにする方法

LaravelのMigrationでカラム変更でのエラー原因と解決方法

LravelのModelをapp/Modelsへ配置する方法【ディレクトリ構造変更】

Composerでメモリエラーが出る時の対処方法

WordPressで「Warning: count()」が出る場合の原因と対処方法

Laravelのインストール方法。新規プロジェクト作成の流れを解説！