Lambda関数を作り、API GatewayでRest APIを作成し、動作確認でOKだったのに、ローカル環境で開発中のシングルページアプリケーションから作成したRest APIを動かしたらCORSエラーで動かない。今回はAPI GatewayでCORSに対応する方法を解説します。
CORSとは
CORSはCross-Origin Resource Sharingの略です。異なるオリジン間でリソースをシェアする仕組みのことです。同一オリジンセキュリティポリシーは、既定でリソースへのオリジン間のアクセスを禁止しています。それを緩和するのがCORSです。
オリジンとは
URLを構成する要素のうちスキーム （プロトコル）、 ホスト （ドメイン）、 ポート番号のことです。これらがすべて一致している場合に同一オリジンとみなされます。
Reactをローカル環境で動かすとhttp://localhost:3000で動きます。一方、API GatewayのAPIはhttps://hoge.execute-api.region.amazonaws.com/stage/resourceのようなURLで動きます。ローカルのオリジンhttp://localhost:3000とAPIのオリジンhttps://hoge.execute-api.region.amazonaws.comは異なるため、CORSエラーとなります。
CORSの仕組み
HTTPヘッダーに許可する対象を指定することができます。使用するHTTPヘッダーは以下の通りです。下の3つは細かい制御を必要とするための項目で基本的な制御は上の3つで行えます。
| Key | Value |
|---|---|
| Access-Control-Allow-Origin | 許可するオリジン or * |
| Access-Control-Allow-Methods | 許可するメソッド |
| Access-Control-Allow-Headers | 許可するヘッダー |
| Access-Control-Expose-Headers | Javascriptからの参照を許すヘッダー |
| Access-Control-Max-Age | CORSの問い合わせ結果をキャッシュする秒数 |
| Access-Control-Allow-Credentials | 資格情報の要否。有効な値はtrue のみ。 |
CORSの処理
CORSの処理は大きく分けてプリフライトリクエストとメインリクエストの2つに分かれます。
| 処理 | 内容 |
|---|---|
| プリフライトリクエスト | OPTIONSメソッドでCORSの許可を確認 |
| メインリクエスト | 実際のリクエスト Access-Control-Allow-Originで許可するオリジンの指定が必要 |
API GatewayでCORSに対応するには2点対応が必要になります。
- 対象のリソースでOPTIONSのメソッドを作成すること
- メインのリクエストでAccess-Control-Allow-Originを返すこと
API Gatewayでの対応
リソース作成時に一括で指定する方法
リソース作成時にCORSにチェックを入れます。
リソース作成後にOPTIONSを追加する方法
- CORSを有効にしたいリソースを選択して、CORSを有効にするをクリックします。
メインリクエストでAccess-Control-Allow-Originを返す
Lambdaで実装している場合は以下のようなコードでAccess-Control-Allow-Originを設定します。
return {
'statusCode': 200,
'headers': {
"Access-Control-Allow-Origin": 'https://example.com/',
},
'body': json.dumps('Success')
}まとめ
API GatewayでCORSに対応する方法を解説しました。CORSの仕組みを理解すればAPI Gatewayで何を設定すれば良いかが分かってきます。そのうえでAPI Gatewayでは簡単にCORSに対応する方法が準備されています。CORSエラーが発生した場合はこの記事を参考に対応してみてください。
コメント