LaravelでCORS対応ミドルウェアを導入する方法！API開発初心者向けガイド

1. CORSとは？

1. CORSとは？

CORSは、ブラウザがセキュリティのために実装している仕組みで、別のドメインから自分のAPIにアクセスすることを制限します。例えば、example.com で作ったAPIに anotherdomain.com からJavaScriptでアクセスしようとすると、CORSポリシーに違反するとアクセスがブロックされます。

API開発においては、異なるドメインやサブドメインからアクセスできるようにCORS対応を行うことが重要です。CORSを正しく設定することで、フロントエンドとバックエンドが安全に通信できます。

2. LaravelでCORS対応を確認

2. LaravelでCORS対応を確認

Laravel 7以降では、標準でCORS対応用のパッケージが組み込まれています。app/Http/Kernel.php に設定されている \Fruitcake\Cors\HandleCors::class がミドルウェアとして登録されており、APIルートに自動で適用可能です。

ただし、細かい設定を行う場合は config/cors.php を編集します。ここで、許可するオリジン、メソッド、ヘッダーなどを指定できます。

3. CORS設定の例

3. CORS設定の例

例えば、フロントエンドの http://localhost:3000 からAPIにアクセスしたい場合は、以下のように config/cors.php を編集します。

return [
    'paths' => ['api/*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://localhost:3000'],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => false,
];

この設定で、APIの /api/* に対して、指定したオリジンからのリクエストが許可されます。allowed_methods は許可するHTTPメソッド、allowed_headers は許可するヘッダーを指定します。

4. APIルートにミドルウェアを適用する

4. APIルートにミドルウェアを適用する

通常、CORSミドルウェアは api ルートグループに適用されます。routes/api.php を確認すると、デフォルトで api ミドルウェアが割り当てられています。

Route::middleware(['cors'])->group(function () {
    Route::get('/users', [UserController::class, 'index']);
    Route::post('/users', [UserController::class, 'store']);
});

このようにルートグループにCORSミドルウェアを指定することで、複数のAPIエンドポイントにまとめてCORS対応ができます。

5. 注意点とテスト方法

5. 注意点とテスト方法

ブラウザでAPIをテストする場合、CORSが正しく設定されていないと Access to fetch at 'URL' from origin 'X' has been blocked by CORS policy のようなエラーが表示されます。CORS設定を更新したら、必ずブラウザやAPIクライアントで動作確認してください。

また、supports_credentials を true にすると、Cookieや認証情報を伴うリクエストも許可できますが、安全性に注意してください。開発環境では false のままで問題ありません。

6. まとめ的なポイント

6. まとめ的なポイント

LaravelでCORS対応ミドルウェアを導入すると、異なるドメインからAPIに安全にアクセスできるようになります。config/cors.php の設定で許可するオリジンやHTTPメソッドを指定し、ルートグループにミドルウェアを適用するだけで簡単に対応可能です。API開発ではCORS設定を正しく理解しておくことが重要です。