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 Token で使用される Authorization ヘッダーなど) を含むすべてを除外します。

したがって、すべてが正しく機能するようにするには、許可されたオリジンを明示的に指定する方が良いです。

`CORSMiddleware` の使用¶

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

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 リクエストヘッダーのリスト。デフォルトは []。すべてのヘッダーを許可するには ['*'] を使用できます。シンプルな CORS リクエストの場合、Accept、Accept-Language、Content-Language、Content-Type ヘッダーは常に許可されます。
allow_credentials - クロスオリジンリクエストで Cookie をサポートすべきかどうかを示します。デフォルトは 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 から直接提供されています。