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"); // 設定したいルーティング
});