CORS (Cross-Origin Resource Sharing)¶

CORS または「Cross-Origin Resource Sharing」は、ブラウザで実行されているフロントエンドのJavaScriptコードがバックエンドと通信し、そのバックエンドがフロントエンドとは異なる「オリジン」にある状況を指します。

オリジン¶

オリジンとは、プロトコル (http, https)、ドメイン (myapp.com, localhost, localhost.tiangolo.com)、ポート (80, 443, 8080) の組み合わせです。

したがって、これらはすべて異なるオリジンです。

https://
https://
https://:8080

たとえすべて localhost であっても、使用しているプロトコルやポートが異なるため、これらは異なる「オリジン」です。

手順¶

たとえば、https://:8080 で実行されているフロントエンドがブラウザにあり、そのJavaScriptが https:// で実行されているバックエンドと通信しようとしているとします (ポートを指定しないため、ブラウザはデフォルトのポート 80 を想定します)。

すると、ブラウザは :80 バックエンドにHTTP OPTIONS リクエストを送信します。バックエンドがこの異なるオリジン (https://:8080) からの通信を許可する適切なヘッダーを送信した場合、:8080 ブラウザはフロントエンドのJavaScriptが :80 バックエンドにリクエストを送信することを許可します。

これを実現するには、:80 バックエンドが「許可されたオリジン」のリストを持っている必要があります。

この場合、:8080 フロントエンドが正しく動作するためには、リストに https://:8080 が含まれている必要があります。

ワイルドカード¶

すべてのオリジンを許可するには、リストを "*" （「ワイルドカード」）と宣言することも可能です。

しかし、それは特定の種類の通信しか許可せず、資格情報（Cookie、Bearerトークンで使用されるようなAuthorizationヘッダーなど）を含むすべてを除外します。

したがって、すべてが正しく機能するようにするには、許可されたオリジンを明示的に指定することをお勧めします。

`CORSMiddleware` を使用する¶

FastAPIアプリケーションで、CORSMiddlewareを使用して設定できます。

CORSMiddlewareをインポートします。
許可されたオリジン (文字列として) のリストを作成します。
それをFastAPIアプリケーションに「ミドルウェア」として追加します。

また、バックエンドが以下を許可するかどうかを指定できます。

資格情報（Authorizationヘッダー、Cookieなど）。
特定のHTTPメソッド (POST、PUT) またはワイルドカード "*" を使用してすべてを許可します。
特定のHTTPヘッダー、またはワイルドカード "*" を使用してすべてを許可します。

Python 3.8+

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

origins = [
    "https://.tiangolo.com",
    "https://.tiangolo.com",
    "https://",
    "https://:8080",
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)


@app.get("/")
async def main():
    return {"message": "Hello World"}

CORSMiddleware の実装で使われるデフォルトのパラメーターは、デフォルトで制限的であるため、ブラウザーがクロスドメインコンテキストで使用できるように、特定のオリジン、メソッド、またはヘッダーを明示的に有効にする必要があります。

以下の引数がサポートされています

allow_origins - クロスオリジンリクエストを許可するオリジンのリスト。例: ['https://example.org', 'https://www.example.org']。['*'] を使用すると、すべてのオリジンを許可できます。
allow_origin_regex - クロスオリジンリクエストを許可するオリジンとマッチさせる正規表現文字列。例: 'https://.*\.example\.org'。
allow_methods - クロスオリジンリクエストで許可されるHTTPメソッドのリスト。デフォルトは ['GET'] です。['*'] を使用すると、すべての標準メソッドを許可できます。
allow_headers - クロスオリジンリクエストでサポートされるHTTPリクエストヘッダーのリスト。デフォルトは [] です。['*'] を使用すると、すべてのヘッダーを許可できます。Accept、Accept-Language、Content-Language、Content-Type ヘッダーは、シンプルなCORSリクエストでは常に許可されます。
allow_credentials - クロスオリジンリクエストでクッキーをサポートすることを示します。デフォルトは False です。

allow_credentials が True に設定されている場合、allow_origins、allow_methods、allow_headers のいずれも ['*'] に設定することはできません。これらはすべて明示的に指定する必要があります。
expose_headers - ブラウザがアクセスできる必要がある応答ヘッダーを示します。デフォルトは [] です。
max_age - ブラウザがCORS応答をキャッシュする最大時間を秒単位で設定します。デフォルトは 600 です。

ミドルウェアは、2つの特定のタイプのHTTPリクエストに応答します...

CORSプリフライトリクエスト¶

これらは、Origin および Access-Control-Request-Method ヘッダーを持つすべての OPTIONS リクエストです。

この場合、ミドルウェアは受信リクエストをインターセプトし、適切なCORSヘッダー、および情報提供のための 200 または 400 応答を返します。

シンプルなリクエスト¶

Origin ヘッダーを持つすべてのリクエストです。この場合、ミドルウェアはリクエストを通常どおり通過させますが、応答に適切なCORSヘッダーを含めます。

詳細情報¶

CORS の詳細については、Mozilla CORSドキュメントを参照してください。

技術的な詳細

from starlette.middleware.cors import CORSMiddleware も使用できます。

FastAPI は、開発者であるあなたにとって便利なように、fastapi.middleware にいくつかのミドルウェアを提供しています。しかし、利用可能なミドルウェアのほとんどはStarletteから直接来ています。