AWS S3で配信するhtmlからCORS (Cross-Origin Resource Sharing)を行う

動機

一般公開されるAPIは基本的にブラウザからのアクセスはできない（CORS）。
S3でサイトを公開している場合には何かを経由する必要がある。
サーバの管理をしたくないからS3を選択したので楽して解決したい。

AWS API Gateway を使う

  1. サービス一覧のアプリケーションサービスにある API Gateway 選択してAPI管理画面に移る

  2. Create APIを押してNew APIを作成する

  3. Actions > Crate Resource で適当なリソースを作成する（しなくてもいい）

  4. Actions > Create Method で目的にあったhttpメソッドを作る

  5. 以下を入力して保存する

    Integration type : HTTP Proxy
HTTP method : 利用したいAPIのメソッド
Endpoint URL : 利用したいAPIのURL

  6. Method Request を選択して、URL Query String Parameters に渡したい値を追加する

  7. Actions > Enable CORS でCORSを許可する設定にする(自動でしてくれる)

  8. Actions > Deploy API でステージに上げる（これで使えるようになる）

  9. 出来上がった API を S3 の html から叩く

感想

思いのほか簡単に解決できた。
APIで取得したデータを加工して渡したいときは API から Lambda を呼び出して Lambda から API を叩くこともできる。