Next.js × FastAPIの構成でCORSではまる

経緯

こちらで紹介させていただいておりますが、Next.jsとFastAPIでNext.jsからAPIをコールするとCORSの設定ではまったので記載させていただきます。

CORSとは

Cross-Origin Resource Shareringの略で日本語訳すると「オリジン間リソース共有」と呼びます。
そもそもオリジンが何かといえば、ページのスキーム(プロトコル)、ホスト(ドメイン)、ポートによって定義されるもので、これらがすべて一致するものが同一オリジンであると言えます。
セキュリティ上の理由からブラウザーはスクリプトによって開始されるオリジン間HTTPリクエストを制限しています。
このことからNext.jsとFastAPIでそれぞれ起動している場合はportは異なるのでこの制限を受けてしまいます。

発生するエラー

Next.jsをhttp://127.0.0.1:3000で起動しており、fastAPIのhttp://localhost:8000/users/createのAPIをコールしたら下記のようなエラーが発生しました。

• エラーメッセージ

Access to XMLHttpRequest at 'http://localhost:8000/users/create' from origin 'http://127.0.0.1:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

対応方法

FastAPI側からオリジン間共有を認めるように設定する必要があります。
生成したFastAPIのインスタンスに対して下記のように設定することで対応しました。

from starlette.middleware.cors import CORSMiddleware
    app.add_middleware(
      CORSMiddleware,
      allow_origins=["*"],
      allow_credentials=True,
      allow_methods=["*"],
      allow_headers=["*"])

終わりに

もっと良い対応方法があるかもしれませんが、いったんは上記で対応しました。
すべてを認めてしまってよいのか等は今後考えていきたいなと考えています。