月間25,000PV達成! 収益は毎日発生中! 記事はほぼ毎日更新中! ギランバレー症候群に関する情報を集めています

超簡単!AngularからLaravelへアクセスする方法!

超簡単!AngularからLaravelへアクセスする方法!
Advertisement

 

AngularとLaravelの連携ってどうすんの?

AngularとLaravelでの開発をしているのですが、AngularとLaravelの連携方法が分からなかったので色々調べてみました。

実はすごく簡単に連携することが可能なのですが、情報が少なく困っておりました。

ということで今回は、AngularからLaravelへアクセスする方法を解説します!

 

 

僕のPC環境

・Windows10

・Angular7

 

 

普通にAngularからLaravelへアクセスすると。。

普通にアクセスしようとすると、上記のようなエラーが出ます。

詳しくは下記でご説明します。

 

 

Angular×Laravel連携の概要

前提として、AngularとLaravelではポート番号が異なります。

Angular localhost:4200
Laravel localhost:8080

 

AngularからLaravelへアクセスする際、異なるオリジンへのアクセスは許可されていないため、デフォルトではアクセスできません。

異なるオリジンへのアクセスは許可されていない」は、JavaScriptがセキュリティを考慮しているためです。

 

なので、Laravel側で「異なるオリジンからのアクセスを許可する」ように設定する必要があります。

Angular側の設定は特にありません。サーバ側の設定のみで完結します。

 

 

Advertisement

 

Angular×Laravel連携手順

クロスオリジン対応のミドルウェアを作成

「App\Http\Middleware」に「Cors.php」を新規作成します。

本ミドルウェアは、「localhost:4200」からのアクセスを許可するようにhttpヘッダを変更しています。

 

ミドルウェアの設定

「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の勉強をするのに以下の書籍を購入しました。おすすめですよ!

 

 

 

 

まとめ

しかし、ネットの情報はワケの分からん情報ばっかりですね。

たったこれだけのことなのに、情報もそこまで出てこないですし。。

この記事が誰かの救いになれば幸いです。

Travelerを知らないの?