Laravelでクロスドメインに対応する。

Laravelでクロスドメインに対応したい。


LaravelでAPI開発をする際、同一ドメインではなくクロスドメインでアクセスを許可するなら、いくつかの設定をしていないと以下のようなエラーが発生する。

AccesstoXMLHttpRequest at 'http://****.com' from origin 'http://****.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

CORSを設定するミドルウェアを作成


ミドルウェアを作成

以下のコマンドを実行してミドルウェアを作成します。

$ php artisan make:middleware Cors 

作成されたミドルウェアを以下のように書き換えます。

<?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', 'http://localhost:8080')
->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
->header('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With');
}
}

レスポンスのHTTPヘッダーのフィールドを3つ追加します。

Access-Control-Allow-Origin

APIへのアクセスを許可するオリジンを指定します。
上記の例では'http://localhost:8080'からのアクセスを許可するが、それ以外からのアクセスは許可しない設定です。

Access-Control-Allow-Origin: * はダメ

クレデンシャルを必要とするリクエストの場合、Access-Control-Allow-Originにワイルドカードは使えまえん。キチンと許可するオリジンを指定しましょう。
また、CSRF防止の観点から、すべてのOriginを許可するのは危険なのでやめましょう。

Access-Control-Allow-Methods

許可するHTTPリクエストのメゾットを指定します。

Access-Control-Allow-Headers

許可するHTTPヘッダーをしてします。
複数のヘッダーを許可する場合はコンマで区切って指定します。

カーネルに追加


app/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,
'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
'cors' => \App\Http\Middleware\Cors::class, /* ここに追加 */

];

ルートを修正


route/web.php

/* 以下をルートに追加 */
Route::middleware(['cors'])->group(function () {
Route::options('accounts', function () {
return response()->json();
});
Route::post('/test/hoge', '[email protected]');
});

まとめ


以上で、CORSの設定は完了し、クロスドメインアクセスが可能となりました。
laravel完全に理解している程度なのでちょっと間違いがあったらごめんくさい。
それではまた。