はじめに
バックエンドAPIとフロントエンドが異なるドメインやポートで動作する場合、ブラウザのセキュリティ制約によりCORSの設定が必要になります。
FastAPIでは、CORSMiddleware を使用して簡単にCORS設定を行うことが可能です。
今回取り扱う設定例はこちらです。
app.add_middleware(
CORSMiddleware,
allow_origins=["https://xxx.xyz", "https://api.xxx.xyz", "http://localhost"],
allow_credentials=True,
allow_methods=["GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"],
allow_headers=["Content-Type", "Authorization", "X-CSRF-Token", "Access-Control-Allow-Origin"],
)
個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。
設定内容の解説
| 項目 | 内容 |
|---|---|
allow_origins |
Next.js（xxx.xyzドメイン）とローカル（localhost）からのリクエストを許可 |
allow_credentials |
CookieやAuthorizationヘッダなど認証情報つきリクエストを許可 |
allow_methods |
各種HTTPメソッド（GET, POST, PUT, DELETE, PATCH, OPTIONS）を許可 |
allow_headers |
特定ヘッダー（Content-Type, Authorization, X-CSRF-Tokenなど）を許可 |
これにより、Next.jsとFastAPI間のAPI通信がスムーズに行えるようになります。
補足点
- 本番環境 (
https://xxx.xyz,https://api.xxx.xyz) だけでなく、開発環境 (http://localhost) も許可されている - 認証情報 (
credentials) を正しく取り扱える - メソッドやヘッダーも広く許可しており、一般的なAPI操作が問題なくできる
まとめ
- FastAPIのCORS設定は、
CORSMiddlewareを使って柔軟に管理できる - 本番・開発両方に適切なオリジン設定を施すことが重要
-
allow_headersにはレスポンスヘッダーを含めない - 必要に応じてlocalhostのポート番号も指定する
CORS設定は、セキュリティにも直結する重要なポイントです。今回の改善ポイントも意識しながら、適切な設定を心がけましょう...！