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

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

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

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

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

例えば、ReactVueなどの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をインポートし、それぞれの設定を記述します。

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

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

目次
閉じる