人気のPHP WEBアプリケーションフレームワークLaravelのTipsを記録していきます

Laravel で CORS に対応して開発マシンから axios などでリクエストを送信できるようにする

● 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. jsonが正しく返っていない場合にCORエラーとなります。

親に次のようにしてエラーが出ないようになるかをチェックしましょう。

	public function my_ajax(Request $request, int $id) {
		$q = $request->all();
		return [$q];

No.1669
03/08 21:42

edit