Amazon API Gatewayは、AWSのサーバー側機能を利用する場合に利用する重要なサービスです。
今回は、API Gatewayを利用した場合のCORSの対応について説明します。
CORS(Cross-Origin Resource Sharing)では、自Webサイト以外からのアクセス権を制御するための仕組みとなります。自Webサイト(自ドメイン)のみアクセス権を与える(異なるドメインにアクセス権を与えない)設定をすることで、セキュリティを高める事となります。制御には、Access-Control-Allow-Originを所定のOriginからしかアクセスできない様に設定します。
しかし、開発を行う際にこの点で課題が発生します。
Access-Control-Allow-Originは、1つのドメインしか指定できないためです。
試験環境(dev)と本番環境(prod)があり、それぞれ異なるドメインであった場合に同じ、それぞれで別のAPI Gatewayを利用するしかできなくなります。そうなると、本番のAPI Gatewayの動作確認をするためには、本番環境を利用する必要がでてきます。これでは、都合が悪いです。
この問題を解決するために、API Gatewayでは、「Access-Control-Allow-Origin レスポンスヘッダの値を動的に変更する」ことができます。具体的には、「マッピングテンプレートを使用して、APIのリクエストおよびレスポンスパラメータとステータスコードをオーバーライドする」という対応となります。
マッピングテンプレートを以下の様に設定します。
#set($origin = $input.params().header.get('origin'))
$input.json("$")
#if ($origin.matches(“^http(s?)://(##正規表現によるオリジン判定###)"))
#set($context.responseOverride.header.Access-Control-Allow-Origin = $origin)
#end
マッピングテンプレートでは、Velocity Template Language (VTL)というスクリプトを利用する事ができるため、多様な対応が可能となります(※私も勉強中でございます (^^ゞ )
※参考とさせていただいたサイト ありがとうございました
「Lambda無しでもいけます!!許可されたサイトにだけCORSを許可するためにAPI Gatewayのモックレスポンスを動的に設定してみた」
(本記事にたいする質問やお問合せ・IT改善のご相談はこちら)