はじめに

現在、練習としてFastAPIを使って簡単なアプリケーションを作成しています。
チュートリアルを進めていく中で以下のようなコードを記述しました。

origins = [
  "https://localhost:3000",
]

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

コードを書いたはいいものの意味がわからなかったので、調べたことをまとめていきながら上記のコードの内容を理解していきたいと思います。

本文に移る前に

今回、CORSについて調べるにあたり、こちらのなんとなく CORS がわかる...はもう終わりにする。を参考にさせていただきました。
ありがとうございます。
あくまでこの記事は、上記の記事を元にわからない部分を付け足しながら書いた記事です。
現時点での自分の理解度で書いているため間違った記載があることも十分考えられるので、その際はご指摘いただけると助かります。

結論

CORSに関する設定をしている

CORS??何それ??状態だったのでCORSからまとめていきます。

CORSとは？

CORSはCross Origin Resource Sharingの略。日本語訳では「オリジン間リソース共有」。

オリジン間リソース共有Cross-Origin Resource Sharing (CORS) は、追加の HTTP ヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組み(MDNより)

またまた、ちんぷんかんだったので、オリジンについて調べていきます。
※ひたすらここから用語の深堀がはじまっていきます。

オリジンとは？

ウェブコンテンツのオリジンOriginは、ウェブコンテンツにアクセスするために使われる URL のスキーム (プロトコル)、ホスト (ドメイン)、ポートによって定義されます。スキーム、ホスト、ポートがすべて一致した場合のみ、二つのオブジェクトは同じオリジンであると言えます。

オリジンとは、URLのスキーム、ホスト、ポートの３つの組み合わせのことみたいです。
では次にURLについてみていきます。

URL(スキーム、ホスト、ポート)について

こちらは例をあげてみていきます。

　①　　 ②　 　  ③　　　 ④　　⑤
http://www.example.com:80/user/1

スキーム・・・利用するプロトコルを指定(http)

プロトコル・・・ネットワークに接続された機器同士が通信する時のあらかじめ決められたルール

ホスト・・・サービスを提供する役割のコンピューターのこと(www)
ドメインの前にドット( . )区切りで表される
ドメイン・・・IPアドレスを人間が認識しやすくしたもの(example.com)　

＊一意でなければならない
- IPアドレス・・・インターネット上に存在するサーバーを特定して、接続するための個別の識別番号
ポート番号・・・コンピューターが提供するサービスを特定する番号（通常は省略されている。）(80)

＊ドメインがマンションの住所、ポート番号が部屋番号のイメージ
パス・・・接続したサーバーのファイルやディレクトリの場所を示すもの(user/1)

オリジンとは、先ほども書いた通り、URLのスキーム、ホスト、ポートの３つの組み合わせのことです。
では、上記のURLの説明を元に、異なるオリジンと同じオリジンの例を挙げてみます。

異なるオリジン	例	異なる点
スキームが異なる	http://qiita.com/hoge https://qiita.com/hoge	http or https
ホストが異なる	http://www.example.com http://news.example.com	www or news
ポートが異なる	http://localhost:3000/ http://localhost:8000/	3000 or 8000

同じオリジン
http://hoge.example.com/ http://hoge.example.com:80/ http://hoge.example.com/example.html

なんとなくオリジンについてわかってきました。
ここでもう一回CORSの説明に戻ってみます。

オリジン間リソース共有Cross-Origin Resource Sharing (CORS) は、追加の HTTP ヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組み(MDNより)

つまり「オリジン間リソース共有」という訳にあるように、情報を異なるオリジン間で共有することができるようにする仕組みのことをCORSというみたいです。
オリジンについて意味を知ることで、CORSについてもちんぷんかんの状態から脱することができました。
ちなみに読みは”シーオーアールエス”もしくは”コルス”と読むらしいです。

CORS の必要性

CORSがどういうものかがなんとなくわかってきたので、次は必要性やそのしくみについてみていきたいと思います。
そもそもWebは、同一生成元ポリシー（Same-Origin Policy）と呼ばれるものを実施していて、オリジンが違うとその情報源はクロスオリジンになりアクセスがブロックされます。

なぜ同一生成元ポリシーが必要なの？？

これはセキュリティーの観点から必要になってきます。同一生成元ポリシーがない場合を考えてみます。
例えばユーザーがECサイトにログインしている状態で別オリジンの悪意あるサイトを閲覧した場合、ECサイトに登録された個人情報を悪意あるサイトから取得されて悪用されてしまう危険性があります。
そのほかにも様々な脆弱性を防ぐ目的で同一生成元ポリシーが必要とされています。

こちらの記事で詳しく書かれています。

悪質な攻撃から守るために、同じオリジンからのリソースにのみアクセスできるようにしていますが、実際のアプリケーションでは他のオリジンにアクセスする場合も存在します。（フロントがサーバー側のAPIとやり取りするのもクロスオリジンです）
このような場合に、クロスオリジンのアクセスを安全に許可するためにブラウザはCORSを利用します。

CORSの仕組み

次に、CORSの仕組みについてみていきたいと思います。
CORSの仕組みは以下のようになっています。

フロントサイドがクロスオリジンにリクエストを送る
クライアントは自動的にHTTPリクエストにOriginというヘッダを追加する。Originヘッダの値は、リクエストがどこから来たのかを表す。
クロスオリジンへのアクセスを許可するためには、サーバー側で設定を行う。（サーバーのレスポンスに許可するためのヘッダを追加する）
リクエストで送られてきたOriginヘッダの値とレスポンスのヘッダの値が等しいかどうかをチェック
4がOKならクロスオリジンのリソースに対してもアクセスができるようになる。

サーバーサイドでCORSに関する設定を行っておいて、フロントサイドからリクエストが来た時に、設定した内容をレスポンスとして返して、その両者の情報を突合してアクセスしていいかどうかのチェックをしているという流れですね。

確かにこの流れであれば、結論で書いた、「CORSに関する設定をしている」という文章に関しても納得できました。

ここまで、CORSについて確認をしてきました。
では、本来の目的である、FastAPI上でのCORSの設定コードを再度みていきたいと思います。

fastAPIでのCORS設定

今までで説明したCORSについて、FastAPIではCORSMiddlewareを使用することで設定ができます。

from starlette.middleware.cors import CORSMiddleware


origins = [
  "https://localhost:3000",
]

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

allow_origins=origins
- クロスオリジンを許可するオリジンのリストを配列で指定する。
  今回はフロント側(react)からのアクセスを許可したいので、https://localhost:3000を指定。　　　　　　　　　　　　　　
allow_creditionals=True
- Cookieの共有を許可するかどうか。デフォルトはFalse。
allow_methods=["*"]　
- 許可するHTTPメソッドを指定する。デフォルトはGET
  
  アスタリスク( * )にすることで全てのHTTPメソッドを許可する。
allow_headers=["*"]
- オリジン間リクエストでサポートするHTTPリクエストヘッダーのリスト。デフォルトは [] 。
  
  ['*']を使用して、すべてのヘッダーを許可できる。
  
  CORSリクエストでは、 Accept 、 Accept-Language 、 Content-Language 、 Content-Type ヘッダーが常に許可される。

allow_headersに関してはあまり理解ができていないのですが、とりあえず許可するHTTPリクエストヘッダーを指定しているのだと思います。

以上が、CORSについてのまとめと、FastAPIでのCORS設定についてでした！

最後に

実際にコードを書いて、いろいろわからない単語を調べていくことでなんとなくではありますが、理解を進めることができました。
わからないことが少しでもわかるようになると楽しいですね！
あと、やはりアウトプットは自分の理解を深めるためにも大切だと感じました。
ここまで読んでいただいてありがとうございました。

参考記事、書籍

fastapi CORSドキュメント
URIを理解する
ドメイン名とは
MDN Originドキュメント
MDN CORSドキュメント
なんとなく CORS がわかる...はもう終わりにする。
CORSの仕組みをGIFアニメで分かりやすく解説
小林恭平・坂本陽, イラスト図解式この一冊で全部わかるWeb技術の基本, NRIネットコム株式会社, 2017.