【FastAPI】CORSの設定方法について

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

ローカルで開発環境を作成している場合でも

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

これらは別々のオリジンとなるため、CORSの設定によって通信を許可する必要があります。

例えば、ReactやVueなどのSPAでは必須の設定です。

今回はFastAPIでのCORS設定方法についてご紹介いたします。

この記事のサンプルコード

CORSの設定方法

CORSの設定は、app.add_middleware()で記述できます。

https://fastapi.tiangolo.com/tutorial/cors/?h=cors#use-corsmiddleware

from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

origins = [
    'http://localhost:3000',
]

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

fastapi.middleware.corsからCORSMiddlewareをインポートし、それぞれの設定を記述します。

許可するオリジンや、認証情報の設定、許可するメソッドなど設定が可能です。

この記事のサンプルコード