CORSエラーでReactとFastAPI間で通信がうまくいかなかった

前提

フロントエンドにReact、バックエンドにFastAPIを使用してアプリを作成しており
バックエンドではJWTトークン生成しユーザー認証を行なっていた。

ReactからPOSTリクエストを送る際にCORSエラーになってしまう現象が起きてしまいました。

CORSの設定の記述は以下

# main.py

app.add_middleware(
    CORSMiddleware,
    # BACKEND_CORS_ORIGINSは.envにて記述
    allow_origins=settings.BACKEND_CORS_ORIGINS,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"]

.envは以下の通り

# CORS関連の設定
BACKEND_CORS_ORIGINS=["http://localhost:5173", "https://cloudfront.アプリ名.net"]

フロントエンドのオリジンは許可しているのにCORSエラーが出て通信ができず詰まってしまいました。

結論から言うと問題の箇所は以下の部分でした。

   	allow_methods=["*"],
    allow_headers=["*"]

ここでワイルドカード（ * ）を使用してメソッド、ヘッダーともに全てを許可しているので大丈夫かと思っていたが、認証でJWTなどのBeareトークンを使用している時は明示的に指定する必要があるらしい。

FastAPI公式

以下の様に明示的に指定することでエラーを解決できた。

app.add_middleware(
    CORSMiddleware,
    allow_origins=settings.BACKEND_CORS_ORIGINS,
    allow_credentials=True,
    allow_methods=["GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"],
    allow_headers=["Content-Type", "Authorization", "X-CSRF-Token", "Access-Control-Allow-Origin"]

ReactではAxiosを使用しており、ブラウザからプリフライトリクエストというものが自動で発行され、リクエストのメソッドを許可するかどうかを確認しているらしい。その時 OPTIONS メソッドを使用して確認を行なっている。

そのため、allow_methods で OPTIONS も許可する必要がある。

参考資料

少しでもこの記事が参考になれば幸いです。