CORS(Cross-OriginResourceSharing)メモ

Last updated at 2025-01-30Posted at 2023-10-17

はじめに

同一オリジンポリシーの制限を回避して、異なるオリジンへのアクセスを許可できる仕組み

ブラウザは、JavaScriptであるオリジン（ドメイン、プロトコル、ポートが組み合わさったもの）からロードされたウェブページからは同じオリジンのリソースへのレスポンスしか受信しないように制限している
それを回避して異なるオリジンのレスポンスを受信するようにした仕組みがCORS

ヘッダー名	役割
`Access-Control-Allow-Origin`	許可するオリジンを指定 (必須)
`Access-Control-Allow-Methods`	許可する HTTP メソッドを指定
`Access-Control-Allow-Headers`	許可するリクエストヘッダーを指定
`Access-Control-Allow-Credentials`	`credentials: include` を許可する
`Access-Control-Expose-Headers`	JavaScript で取得可能なレスポンスヘッダーを指定
`Access-Control-Max-Age`	プリフライト (`OPTIONS`) のキャッシュ時間

※リクエストの内容によって、設定しなくてはいけないヘッダーは異なる

ブラウザはこれらのCORS ヘッダーをチェックして、JavaScript (fetch, XMLHttpRequest) でレスポンスを取得できるかどうかを決定します。

同一オリジンからの情報読み出しは可能だが、クロスオリジン(同一オリジンではない)からの読み出しは基本できない。同一オリジンの定義は下記参照。

プロトコル、ポート番号 (もしあれば)、FQDN = https://www.aaaa.co.jp:443

シンプルなリクエストの場合はAccess-Control-Allow-Origin: 読み出したいサーバの FQDNがサーバ(情報提供側)のレスポンスに含まれていると、クロスオリジンの情報を読み取ることができる。

例えばReactサーバとAPIサーバと別れていたら、APIサーバのレスポンスのAccess-Control-Allow-OriginにはReaxtサーバのFQDNを指定しないといけない

以下参照

シンプルなリクエストの条件を満たさない場合、ブラウザはプリフライトリクエストというHTTPリクエストを送信する(外部へのアクセス前に)。これにより、ブラウザはサーバーからのレスポンスを確認し、実際のリクエストを安全に送信できるかどうかを判断します。

プリフライトリクエストを正常に通過させ、クロスオリジンの情報を読み出すためには、サーバー側(情報提供側)で以下の設定を行う必要があります

Access-Control-Allow-Origin:
- このヘッダーで、どのオリジンからのリクエストを許可するかを指定します。
Access-Control-Allow-Methods:
- どのHTTPメソッドを許可するかを指定します。例：POST, GET, PUT など。
Access-Control-Allow-Headers:
- リクエストで許可されるヘッダーを指定します。特にカスタムヘッダーや、特定の認証に関連するヘッダーなど、シンプルなリクエストの条件にないヘッダーを使う場合は、ここで明示的に許可する必要があります。

上記3つは基本的に必須

Access-Control-Max-Age: このヘッダーを使用して、ブラウザがプリフライトレスポンスをキャッシュする時間（秒単位）を指定できます。これにより、同じリクエストを繰り返し送る際のオーバーヘッドを削減できます。レスポンスしたほうが便利。

サーバー側でこれらのヘッダーを適切に設定することで、シンプルなリクエストの条件を満たさないクロスオリジンのリクエストでも、情報を正常に読み出すことができます。

デフォルトでクロスオリジンに対するリクエストにはクッキーなどの認証用に伴う情報はリクエストヘッダには自動的に送信されない。
認証用のヘッダを送信するようにするには
- クライアント側ではXMLHttpRequestのプロパティwithCredentialsをtrueにセットする必要がある。
- APIサーバ側(情報提供側)ではAccess-Control-Allow-Credentails:trueを返す必要がある。