AngularとLaravelの連携ってどうすんの？
AngularとLaravelでの開発をしているのですが、AngularとLaravelの連携方法が分からなかったので色々調べてみました。
実はすごく簡単に連携することが可能なのですが、情報が少なく困っておりました。
ということで今回は、AngularからLaravelへアクセスする方法を解説します！
僕のPC環境
・Windows10
・Angular7
普通にAngularからLaravelへアクセスすると。。
|
1 2 3 4 |
XMLHttpRequest cannot load http://localhost/hoge. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. |
普通にアクセスしようとすると、上記のようなエラーが出ます。
詳しくは下記でご説明します。
Angular×Laravel連携の概要
前提として、AngularとLaravelではポート番号が異なります。
| Angular | localhost:4200 |
|---|---|
| Laravel | localhost:8080 |
AngularからLaravelへアクセスする際、異なるオリジンへのアクセスは許可されていないため、デフォルトではアクセスできません。
「異なるオリジンへのアクセスは許可されていない」は、JavaScriptがセキュリティを考慮しているためです。
なので、Laravel側で「異なるオリジンからのアクセスを許可する」ように設定する必要があります。
Angular側の設定は特にありません。サーバ側の設定のみで完結します。
Angular×Laravel連携手順
クロスオリジン対応のミドルウェアを作成
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<?php namespace App\Http\Middleware; use Illuminate\Support\Facades\Log; use Closure; class Cors { /** * 異なるオリジンからのアクセスを許容させる * * @param \Illuminate\Http\Request $request * @param \Closure $next * @return mixed */ public function handle($request, Closure $next) { $response = $next($request); $http_origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : ""; if ($http_origin == "http://localhost:4200") { $response ->header("Access-Control-Allow-Origin" , $http_origin) ->header("Access-Control-Allow-Headers" , 'content-type'); } return $response; } } |
「App\Http\Middleware」に「Cors.php」を新規作成します。
本ミドルウェアは、「localhost:4200」からのアクセスを許可するようにhttpヘッダを変更しています。
ミドルウェアの設定
|
1 2 3 4 5 6 7 8 |
protected $middleware = [ \App\Http\Middleware\Cors::class, \App\Http\Middleware\CheckForMaintenanceMode::class, \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class, \App\Http\Middleware\TrimStrings::class, \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class, \App\Http\Middleware\TrustProxies::class, ]; |
「App\Http\Kernel.php」に、先ほど作成した「Cors.php」を設定します。
これで終了です！
LaravelにAngularを組み込む方法
以下のサイトが参考になります。
■laravel内でangularを使えるようにする
URL：「https://mrkmyki.com/2018/10/24/laravel%E5%86%85%E3%81%A7angular%E3%82%92%E4%BD%BF%E3%81%88%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B%E3%80%82/」
ただし、この方法だと「ビルドをしなくてはいけない」「Angularが重くなるとOutOfMemoryのエラーが出る」のでおすすめしません。
おすすめ書籍
僕は、AngularとLaravelの勉強をするのに以下の書籍を購入しました。おすすめですよ！
まとめ
しかし、ネットの情報はワケの分からん情報ばっかりですね。
たったこれだけのことなのに、情報もそこまで出てこないですし。。
この記事が誰かの救いになれば幸いです。
