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 を叩くこともできる。