複数オリジンからのアクセスをHTTP Access-Control-Allow-Originヘッダーで許可する方法

HTTP Access-Control-Allow-Originヘッダーを用いて、複数の別オリジンのフロントエンドアプリから、APIを呼び出すためのCORS設定方法をまとめる。

ユースケース

• 以下のようなApacheをWebサーバーとして配置する構成のアプリ(API)を、複数の別オリジンのフロントエンドアプリから呼び出したい場合

実現手段

• Apacheの設定ファイルを、許可するオリジンからのリクエストである場合にAccess-Control-Allow-Originヘッダーを付与するように記述する。

SetEnvIf Origin "^http(s)?://(www\.)?(domain-x\.com|domain-y\.com|domain-z\.com)" ALLOWED_ORIGIN=$0
Header set Access-Control-Allow-Origin %{ALLOWED_ORIGIN}e env=ALLOWED_ORIGIN

1. リクエストのOriginヘッダーを正規表現判定する。※判定ルールは環境変数として外出ししても良い。
2. マッチしたOriginを変数ALLOWED_ORIGINに代入する。
3. レスポンスのAccess-Control-Allow-OriginヘッダーにOriginヘッダーの値がセットされる。

参考情報

• Access-Control-Allow-Origin Multiple Origin Domains?