CORSについて学ぼう！

CORS#

CORSはCross-Origin Resource Sharingの略で、異なるオリジンのリソースが相互にやり取りできるようにするWebセキュリティメカニズムです。
Webブラウザが他のWebサイトのリソースにアクセスすることを許可する仕組みです。

上の画像はトスのCORS（クロスオリジンリソース共有）から引用しました。
画像の整理がとても分かりやすくて、一目で理解できますね！

CORSは以下のような目的で使用されます。

• API呼び出し: Webアプリケーションが別ドメインのAPIを呼び出せるようにします。
• 画像やその他のリソースの読み込み: Webサイトが別ドメインの画像、CSSファイル、JavaScriptファイルなどを読み込めるようにします。
• リアルタイムデータ共有: Webアプリケーションが異なるドメイン間でリアルタイムにデータを共有できるようにします。

Headers#

リクエストヘッダーとレスポンスヘッダーで使用されるCORSの値は以下の通りです。

Request headers#

• Origin: リソースをリクエストするWebサイトのドメインとポート番号を示します。
• Access-Control-Request-Method: サーバーが許可するHTTPリクエストメソッド（GET、POST、PUT、DELETEなど）を示します。
• Access-Control-Request-Headers: 実際のリクエストでどのHTTPヘッダーを使用するかをサーバーに通知するために使用します。

Response headers#

• Access-Control-Allow-Origin: サーバーがどのOriginからのリソースアクセスを許可するかを示します。
• Access-Control-Allow-Credentials: サーバーが資格情報（例：Cookie、セッションID）を含むリクエストを許可するかを示します。
• Access-Control-Expose-Headers: レスポンスヘッダーのうち、クライアント側のスクリプトがアクセスできるヘッダーを指定します。
• Access-Control-Max-Age: キャッシュされたCORSレスポンスの最大有効期間を指定します。
• Access-Control-Allow-Credentials: credentialsフラグがtrueの場合、リクエストに対するレスポンスを表示できるかを示します。
• Access-Control-Allow-Methods: リソースへのアクセス時に許可されるメソッドを指定します。
• Access-Control-Allow-Headers: サーバーが許可するHTTPリクエストヘッダーを示します。

Preflight request#

CORSに関する情報を調べていると頻繁に出てくる用語なので調べてみました。事前リクエストと訳すことができます。

preflight requestはOPTIONSメソッドを使って、別ドメインのリソースにHTTPリクエストを送り、実際のリクエストが安全に送信できるかを確認します。
cross-originリクエストはユーザーデータに影響を与える可能性があるため、このように事前に送信（preflighted）します。

When you see a man of worth, think of how you may emulate him. When you see one who is unworthy, examine yourself.

— Confucius