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

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

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

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

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

僕のプロフィールはこちら

1. 僕のPC環境
2. 普通にAngularからLaravelへアクセスすると。。
3. Angular×Laravel連携の概要
4. Angular×Laravel連携手順
- 4.1. クロスオリジン対応のミドルウェアを作成
- 4.2. ミドルウェアの設定
5. LaravelにAngularを組み込む方法
6. おすすめ書籍
7. まとめ

僕のPC環境

・Windows10

・Angular7

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

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.

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連携手順

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

<?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;
    }
}

<?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ヘッダを変更しています。

ミドルウェアの設定

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,
];

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のエラーが出る」のでおすすめしません。