CORS（クロスオリジンリソース共有）¶

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

オリジン¶

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

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

http://localhost
https://localhost
http://localhost:8080

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

手順¶

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

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

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

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

ワイルドカード¶

リストを"*"（「ワイルドカード」）として宣言して、すべてが許可されるようにすることも可能です。

ただし、これにより、特定の種類の通信のみが許可され、クレデンシャルに関連するすべてのものが除外されます。たとえば、クッキー、ベアラートークンで使用されるような認証ヘッダーなどです。

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

`CORSMiddleware`の使用¶

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

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

バックエンドが許可するかどうかを指定することもできます。

クレデンシャル（認証ヘッダー、クッキーなど）。
特定のHTTPメソッド（POST、PUT）またはワイルドカード"*"を使用したすべてのメソッド。
特定のHTTPヘッダーまたはワイルドカード"*"を使用したすべてのヘッダー。

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

app = FastAPI()

origins = [
    "http://localhost.tiangolo.com",
    "https://localhost.tiangolo.com",
    "http://localhost",
    "http://localhost: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 - クロスオリジンリクエストでCookieがサポートされるべきであることを示します。デフォルトはFalseです。また、認証情報を許可するには、allow_originsを['*']に設定することはできず、オリジンを指定する必要があります。
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から直接提供されています。