Amplify ConsoleでCORSの設定を行う

AWSのAmpify ConsoleでCORSの設定が必要になったんだけど、やり方についてググっても意外とドンピシャな情報がなかったのでメモ。

結論から言うと特段それようの設定があるわけではなくベタにヘッダを指定するだけだった。これはAmplify ConsoleのカスタムヘッダでCORSで必要となる一連の設定をするだけでいい。

この設定はマネージメントコンソールからもできるし、プロジェクトのトップディレクトリ直下にcustomHeaders.ymlというファイルに記述しておくことも可能。

マネージメントコンソールからやる場合はアプリを選択してカスタムヘッダの設定画面を開けばエディタがあるのでそこに直接記述する。記述したものを後からダウンロードすることも可能。

こんな感じの内容をYAML形式で記述する。

customHeaders:
  - pattern: '*.json'
    headers: 
    - key: 'Access-Control-Allow-Headers'
      value: '*'
    - key: 'Access-Control-Allow-Methods'
      value: 'GET'
    - key: 'Access-Control-Allow-Origin'
      value: '*'

patternでは対象となるリソースを指定する。ここではルートディレクトリにあるjsonファイルすべてを対象にしているが、特定のパス配下のjsonファイルだけを指定したい場合はパスも含めて記述すればいい。当然jsonではなくJSのファイルも指定可能だ。

また、今回はサンプルなのでOriginはワイルドカードで指定している。特定のオリジンのみ許可したい場合はここをhttps://www.example.com/みたいな感じで指定すればいい。

メソッドも同様だ。サンプルではGETのみ許可しているが他のメソッドも許可する場合はカンマ区切りで指定する。GET, POST, PUT, OPTIONS, DELETEみたいな感じで。

今回は省略しているが、もちろんAlllow-Control-Expose-Headersなんかも指定可能。

マネージメントコンソールの場合は記述して、保存したらその時点で有効になる。