仮想通貨ブログに専念するため、たまーに更新します!仮想通貨ブログはこちら!

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

  • URLをコピーしました!
悩んでいる男の子

ローカル環境でAngularアプリからLaravelアプリにアクセスする方法が分からないんだよね。。

こんな悩みを解決します。

  • 本記事の内容
  • AngularからLaravelへアクセスする方法
  • 本記事の執筆者
いずみん(@izumin_0401)

今回は、AngularからLaravelへアクセスする方法を解説します。

いずみん

すぐ読み終わるので、是非最後まで読んでみてください!

プログラミングを学びたい方必見!

オンライン特化のプログラミングスクールなら「」が超おススメ!

副業としてプログラミングを学びたい方にもおすすめのスクールです!

  • 初心者が9割以上なので挫折せずに学べる!
  • 受講者に副業の仕事を1案件以上斡旋! ※条件あり
  • オンライン完結型なので、在宅でもお仕事可!
  • プロのメンターがサポートしてくれる!

キャリアカウンセリングメンター相談無料でできるのもおすすめポイントです!

目次

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.

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

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

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

「App\Http\Kernel.php」に、先ほど作成した「Cors.php」を設定します。

これで完了です。

まとめ

今回は、AngularからLaravelへアクセスする方法を解説しました。

意外と大変でした。。

ではまた!

  • 自由な生き方がしたいなら!

自由な生き方をするためには、稼ぐスキルを身に付けなければなりません。

当サイト「リバトレ」では稼ぐスキルに関する情報を日々発信しているので、興味のあるものから見て頂ければ嬉しいです。

稼ぐスキルを身に付けよう!!
SNSもフォローしてね!

この記事が気に入ったら
いいね または フォローしてね!

シェアするんやで!
  • URLをコピーしました!
  • URLをコピーしました!
目次