Laravel5.5 で Cross Domain する - 今からお前んちこいよ

Laravel で React/API を別プロジェクトで作った際、axios を使ったクロスドメインに少し困ったのでメモ。

Access-Control-Allow-Origin エラー

フロントが出すエラーとしては、以下のようなもの。

No 'Access-Control-Allow-Origin' header is present on the requested resource.

原因はAPI側が自身と異なるホストからのアクセスを許可していないから。
なのでAPIのレスポンスヘッダーに許可する設定を加えれば良い。
以下、解決手順はすべてAPI側の設定。

ヘッダーを追加する

方法１： barryvdh/laravel-cors を使う

github.com

方法２：コントローラでレスポンス毎に追記

// XXXController.php

+ header('Access-Control-Allow-Origin', '*')
+ header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
+ header('Access-Control-Allow-Headers: Origin, Content-Type, Accept, Authorization, X-Requested-With');
+ header('Access-Control-Allow-Credentials: true');

return response()->json($data);

方法３：自前ミドルウェア追加

参考） Adding Access-Control-Allow-Origin header response in Laravel 5.3 Passport - Stack Overflow

$ php artisan make:middleware Cors

　
app/Http/Middleware/Cros.php

public function handle($request, Closure $next)
{
    return $next($request)
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
        ->header('Access-Control-Allow-Headers: Origin, Content-Type, Accept, Authorization, X-Requested-With')
        ->header('Access-Control-Allow-Credentials: true');
}

　
app/Http/Kernel.php　＞　$routedMiddleware

'cors' => \App\Http\Middleware\Cors::class,

　
routes/web.php

Route::group(['middleware' => ['cors'], 'prefix' => 'api'], function ($router) { 
    // routes here ... 
});

routeの見直し