FastAPIでCORSを有効にする方法
FastAPIアプリケーションでクロスオリジンリソースシェアリング（CORS）を正しく設定する方法を詳しく説明します。CORSの問題はAPI開発において頻繁に遭遇する問題であり、適切な設定が重要です。
問題の概要
CORSはブラウザのセキュリティポリシーで、あるオリジン（ドメイン）で実行されているWebアプリケーションが別のオリジンのリソースにアクセスすることを制限します。FastAPIアプリケーションでCORSを適切に設定しない場合、フロントエンドアプリケーションからAPIへのリクエストがブロックされます。
基本設定
FastAPIでCORSを有効にするには、CORSMiddlewareを使用します：
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
app = FastAPI()
# 許可するオリジンのリスト
origins = [
"http://localhost:3000", # React開発サーバー
"http://localhost:8080", # Vue.js開発サーバー
"https://yourproductiondomain.com" # 本番環境ドメイン
]
app.add_middleware(
CORSMiddleware,
allow_origins=origins,
allow_credentials=True,
allow_methods=["*"], # すべてのHTTPメソッドを許可
allow_headers=["*"], # すべてのヘッダーを許可
)
@app.get("/")
async def main():
return {"message": "Hello World!"}パラメーターの詳細設定
CORSミドルウェアにはさまざまな設定オプションがあります：
app.add_middleware(
CORSMiddleware,
allow_origins=["http://localhost:3000", "https://example.com"], # 許可するオリジン
allow_credentials=True, # クッキーの送信を許可
allow_methods=["GET", "POST", "PUT", "DELETE"], # 許可するHTTPメソッド
allow_headers=["Content-Type", "Authorization"], # 許可するヘッダー
expose_headers=["X-Custom-Header"], # ブラウザに公開するヘッダー
max_age=600, # プリフライトリクエストの結果をキャッシュする時間（秒）
)セキュリティ注意点
allow_origins=["*"]とallow_credentials=Trueを同時に使用するとセキュリティ上の問題が発生します。本番環境では具体的なドメインを指定してください。
開発環境での設定
開発中は、すべてのオリジンを一時的に許可することもできます：
app.add_middleware(
CORSMiddleware,
allow_origins=["*"], # すべてのオリジンを許可（開発用）
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)ベストプラクティス
本番環境では必ず具体的なオリジンのみを許可し、ワイルドカード*の使用は避けてください。
よくある問題と解決策
1. レスポンスヘッダーが表示されない場合
カスタムヘッダーをブラウザで利用可能にするにはexpose_headersを設定します：
app.add_middleware(
CORSMiddleware,
allow_origins=["http://localhost:3000"],
expose_headers=["X-Custom-Header", "Content-Range"]
)2. サーバーサイドエラーによるCORS問題
サーバー側でエラーが発生すると、CORSヘッダーが正しく設定されない場合があります：
@app.get("/items")
async def get_items():
try:
# 何らかのデータ処理
items = await fetch_items_from_db()
return items
except Exception as e:
# エラー時でもCORSヘッダーを維持
from fastapi import Response
return Response(
content=f"Error: {str(e)}",
status_code=500,
headers={"Access-Control-Allow-Origin": "http://localhost:3000"}
)3. ローカルファイルからのアクセス
file://プロトコルからアクセスする場合、オリジンは'null'として扱われます：
app.add_middleware(
CORSMiddleware,
allow_origins=['null'], # ローカルファイル用
allow_credentials=True,
allow_methods=['*'],
allow_headers=['*']
)セキュリティ警告
allow_origins=['null']はセキュリティリスクがあるため、本番環境では使用しないでください。
アプリケーションの実行
CORSを設定したFastAPIアプリケーションを実行します：
uvicorn main:app --reload --host 0.0.0.0 --port 8000テスト方法
HTMLファイルを作成してCORS設定をテストできます：
<!DOCTYPE html>
<html>
<head>
<title>CORS Test</title>
</head>
<body>
<script>
// FastAPIサーバーにリクエストを送信
fetch("http://localhost:8000/")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
</script>
</body>
</html>まとめ
FastAPIでCORSを正しく設定するには、適切なミドルウェア設定とセキュリティ考慮事項の理解が重要です。開発環境と本番環境で適切な設定を使い分け、常にセキュリティを最優先にしてください。公式ドキュメントも随時確認することをお勧めします。