FastAPIでCORSを設定するにはどうしますか？

Question

Accepted Answer

**CORS**（Cross-Origin Resource Sharing）は、あるオリジンからのウェブページが別のオリジンのAPIを呼び出せるかどうかを制御するブラウザのセキュリティメカニズムです。FastAPIは組み込みの**`CORSMiddleware`**で設定します。異なるドメイン/ポートのフロントエンドがAPIを呼び出すたびにCORSに遭遇します。

## CORSが対処する問題

```text
A React app at http://localhost:3000 calling an API at http://localhost:8000 is
CROSS-ORIGIN (different port). The BROWSER blocks the response unless the API
sends CORS headers permitting that origin.
(origin = scheme + host + port)
```

## CORSMiddlewareの設定

```python
from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://app.example.com", "http://localhost:3000"],  # ALLOWLIST of origins
    allow_credentials=True,         # allow cookies/auth (requires specific origins, not "*")
    allow_methods=["*"],             # or ["GET", "POST", ...]
    allow_headers=["*"],
)
```

ミドルウェアは必要なCORSレスポンスヘッダを追加し、ブラウザに許可されるオリジン、メソッド、ヘッダを伝えます。ブラウザがこれらのルールを強制します。

## セキュリティ：オリジンを制限する（"*"を使用しない）

```python
# ❌ allowing all origins — convenient but insecure for credentialed/private APIs
allow_origins=["*"]
# ✅ restrict to your known frontend origins (an allowlist)
allow_origins=["https://app.example.com"]
# NOTE: allow_credentials=True is INCOMPATIBLE with allow_origins=["*"]
```

本番環境では、`allow_origins`を`*`ではなく**ホワイトリストに制限**してください。また、認証情報（cookie/auth）を許可するには特定のオリジンが必要です。ワイルドカードは認証情報と一緒には許可されません。

## 重要な誤解

```text
CORS is enforced by the BROWSER, not the server. It does NOT protect your API from
non-browser clients (curl, Postman, other servers) — those ignore CORS entirely.
CORS only governs what browser JavaScript from other origins may do.
```

## なぜ重要なのか

CORSはウェブ開発で最も一般的な問題の1つです。ほぼすべてのフロントエンド対APIの設定で遭遇し（特にローカル開発での異なるポート、本番環境での別々のフロントエンドドメイン）、FastAPIの`CORSMiddleware`で設定方法を知ることは実用的で頻繁に必要な知識です。

なぜ存在するのか（ブラウザの同一オリジンセキュリティ）、サーバーがレスポンスヘッダ経由で参加する方法、そして設定方法（許可されるオリジン、メソッド、ヘッダ、認証情報）を理解することは、リクエストがブロックされずにフロントエンドをFastAPI APIに接続するために必要です。

同様に重要なのは、**安全に**設定することです。許可的な`*`ではなく特定のホワイトリストに`allow_origins`を制限し（そしてワイルドカードと認証情報は互換性がないことを理解し）、**CORSはブラウザメカニズムであってAPI認可ではない**という重要な誤解を把握することです（これは非ブラウザクライアントから保護しません）。

CORSを正しく安全に設定する方法を知ることは、ウェブフロントエンドで消費されるすべてのFastAPI APIにとって重要な日常的な知識です。