● laravel-cors のインストール

A: Laravel 7 以上の場合

laravel-cors はLaravel のバージョン7からデフォルトでインストールされるようになりましたのでわざわざインストールしなくても OK です

B: Laravel 6 以下の場合

barryvdh/laravel-cors のインストール

composer require barryvdh/laravel-cors

● Laravelのミドルウェアに追加

app/Http/Kernel.php の $middleware に以下を追加

api のみ適用したい！と思いますが、 middleware に入れてしまって、後から設定で URL を絞り込みます。

protected $middleware = [
    // ...
    \Fruitcake\Cors\HandleCors::class,
];

namespace が なぜか \Fruitcake\Cors\HandleCors ですが、これで okです。

● 設定ファイル生成

設定ファイルを以下のコマンドで自動作成する。

php artisan vendor:publish --tag="cors"

● 設定ファイルへ設定を記述

config/cors.php

    'paths' => ['api/*'],
    'allowed_origins_patterns' => ['/localhost:?[0-9]*/'],

allowed_origins_patterns は preg_match に渡す、正規表現用文字列です。 上記の設定では localhost や localhost:8080 などを通すようにしています。

これで /api/ 以下のみ クロスドメインアクセス が有効になりました。

● エラーが返ってくる場合にチェックすること

1. テスト用のルートを作成してそれに対してリクエストを送信してみます。

config/cors.php

    // cor-test を追加
    'paths' => ['cor-test', 'api/*'],

routes/web.php

// COR-TEST
Route::get('/cor-test', function () {
    return response()->json([
        'message' => 'cor-test-ok'
    ]);
});

これを設定して、 axios などからアクセスします。

    axios.get('/cor-test', { withCredentials: true })
      .then(response => {
        console.log('cor-test ok:', response.data);
      })
      .catch(error => {
        console.log('cor-test error:', error);
      });