【Laravel】APIとして使うためにCORSの設定をする

CORSについての説明を以下の記事で紹介しています。

【セキュリティ】CORS（Cross-Origin-Resources-Sharing）とは？

APIとして使うためにCORSの設定をする

Corsミドルウェアを作成

まずは、以下のコマンドでミドルウェアのファイルを生成します。

$ php artisan make:middleware Cors

クライアントURLを環境変数に設定

レスポンスヘッダに追加するクライアント側のURLを環境変数として設定します。

今回は、ローカルでのみの設定になりますが、本番環境でも同様に設定して使えます。

CLIENT_BASE_URL = http://localhost:3000

Cors.phpの編集

生成したCors.phpを編集します。

envメソッドを用いて、クライアントサイドのURLを読み込みます。

<?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        // 以下を追加
        return $next($request)
            ->header('Access-Control-Allow-Origin', env('CLIENT_BASE_URL'))
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Headers', 'Content-Type');
    }
}

Kernel.phpの編集

Http/Kernel.phpで呼び出すための記述をします。

    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,
        'password.confirm' => \Illuminate\Auth\Middleware\RequirePassword::class,
        'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
        'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
        'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
        'cors' => \App\Http\Middleware\Cors::class, // 追加
    ];

api.phpの編集

ルーティングを設定します。

bladeを使う場合は、web.phpを使ったと思いますが、今回はAPIとしてのLaravelなので、api.phpにルーティングを記述していきます。

<?php

use Illuminate\Http\Request;

// CORSを許可
Route::middleware(['cors'])->group(function () {

    Route::get("/users/all", "UsersController@all"); // 設定したいルーティング

});