Amazon API Gateway をクロスオリジンで呼び出す (CORS)

はじめに

2017/10/27 追記
本記事はAmazon API Gatewayがリリースされて間もない時期に執筆されたものです。現在、Amazon API GatewayではCORSを有効にする設定が追加されています。CORSを有効にするには、対象のリソースの「Actions」ドロップダウンメニューから「Enable CORS」を選び、設定を行う必要があります。CORSを設定する際には公式の手順と照らし合わせながらお読みいただけますようお願いいたします。
http://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/how-to-cors.html

CORS (Cross-Origin Resource Sharing)とは、ブラウザがオリジン(HTMLを読み込んだサーバのこと)以外のサーバからデータを取得することです。この設定がなされていないAPIは、ドメインが違うWebページ上のJavascriptから呼び出すことができません。

Amazon API Gatewayを利用して作成したAPIは、デフォルトのままではCORSが有効になっていないため、他のウェブページ（自分のサイトのWebページなど）から動的に呼び出すことができません。
では早速ですが、Amazon API Gatewayで作成したAPIのCORSを有効にする方法について見ていきましょう。

本記事では、すでに作成済のAPIがあるものとします。APIの作成方法が知りたい方は、以下の記事をご参照ください。

• 【新機能】Amazon API Gatewayを使ってAWS LambdaをSDKなしでHTTPS越しに操作する
• Amazon API Gateway – API作成から動作確認までやってみる
• Amazon API Gateway を使って AWS 以外のサービスの API をラップする
• Amazon API Gateway を独自ドメインで利用する

また、CORSについてもっと詳しく知りたい！という方は、以下の記事をご参照ください。

• CORS(Cross-Origin Resource Sharing)って何？

CORSの設定

さて、APIに対するCORSの設定は大きく分けて3段階に分かれています。

1. CORS対応させたいResourceにOPTIONSメソッドを追加する
2. OPTIONSメソッドの設定を行う。
3. そのResourceにあるCORS対応させたいメソッドに対し、設定を行う。

では順番に見て行きましょう。

OPTIONSメソッドの追加

OPTIONSメソッドとは、あるURIがどんなHTTPメソッドに対応しているかを定義するものです。(参考)
APIを呼び出す側に対し、このURIがCORSに対応していることを宣言できます。

まずは、マネジメントコンソールでAmazon API Gatewayを表示し、今回編集するAPIを選択して、CORS対応させたいリソースにOPTIONSメソッドを追加してください。

すると、Setup画面が表示されて、OPTIONSメソッドの振る舞い定義を求められますが、ここに入力する項目は適当でOKです。
AWSの公式ドキュメントには以下の様な記述があります。

It does not matter what settings you specify in the Setup pane for this OPTION method. However, you must specify something here so that you can enable this API to be deployed later.

OPTIONSに対し関数呼び出しなどの振る舞いを定義できるようになってはいますが、ここで何を定義しても関係ない、ということのようです。
関係ないということなので、今回はとりあえずGETメソッドで呼び出している AWS Lambda Function と同じものを設定しておきました。

OPTIONSメソッドの設定

OPTIONSメソッドを選択すると表示される Method Execution 画面から、Method Response をクリックして画面に進みます。
この画面で、Http Status列にある200の左にある「▶」を押すと詳細画面を展開することができます。

Response Headers for 200に、次の３つを追加します。

以上の３つを追加したらこの画面での設定は完了です。

次は Method Execution 画面から Integration Response 画面に進みます。前の画面と同様に「▶」を押して詳細画面を展開してください。
この画面では、すでに先ほど入力した３項目が設置されていますので、それらに値を入力していきます（右にあるのえんぴつのマークを押すと入力できます）。

それぞれの入力値は以下のとおりです。

入力値は最初と最後のの「'」を含めて入力してください。

ここで、Access-Control-Allow-Headersに含まれる X-Requested-With, X-Requested-By, X-Api-Key について解説します。
これら３つのヘッダは、AWSの公式ドキュメントでは必須とされておりません。
それぞれ次のような理由から、追加すべきと判断した場合には追加してください。判断つかない場合は、基本的に追加しておいたほうがいいと思います。

他にも、追加で許可しておくべきリクエストヘッダがある場合は、すべてカンマ区切りで入力しておいてください。
これで、OPTIONSの設定は終了です！次は、メソッド毎の設定に進みます。

メソッドのCORS設定

この設定は、CORSを許可したいメソッド（GETやPOST）ごとに行う必要があります。 CORS設定したいメソッドを選んで、Method Execution の画面から Method Response に進んで下さい。

OPTIONSの時と同様に Response Headers for 200 に値を追加します。
追加するのは Access-Control-Allow-Origin のみでOKです。

この設定を、OPTIONS設定をしたリソース内の、公開したいすべてのメソッドに対して適用すれば、CORS設定は完了です！

APIをデプロイした後、jQuery.ajax 等を使って実際に叩いてみてください。問題なくクロスオリジンアクセスできることが確認できると思います。APIキー認証を設定している場合には、X-Api-Keyヘッダを忘れないようにして下さいね。

まとめ

• Amazon API Gatewayを使用して作成したAPIは、デフォルトではCORSに対応していません。
• あるリソースがCORSに対応するためには、OPTIONSメソッドを追加して、各種設定を記述する必要があります。
  • Access-Control-Allow-Headers については、AWSのドキュメントで指定されているヘッダの他に X-Api-Key, X-Requested-With, X-Requested-By の追加を検討してください。
• 上記を設定した上で、CORSを受け入れるすべてのメソッドで Method Response の Response Headers for 200 に Access-Control-Allow-Origin を追加する必要があります。

設定がリソース＆メソッド毎、というのが少々面倒に感じました。
API全部まるっとCORS設定する方法があると良いのですが、今のところ見つけられていません。
発見した方はぜひご一報下さい！ではまた！

参考

• API Gateway リソースの CORS を有効にする - Amazon API Gateway